@extends('admin.layouts.app', ['title' => __(' Offer Product')])

@section('content')
<!-- Header -->
<div class="header bg-primary pb-6 pt-6">
    <div class="container-fluid">
        <div class="header-body">
            <div class="row align-items-center py-4">
                <div class="col-lg-6 col-7">
                    <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                        <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                            <li class="breadcrumb-item"><a href="{{route('dashboard')}}"><i class="fas fa-home"></i></a>
                            </li>
                            <li class="breadcrumb-item"><a href="{{route('daily-offer-products')}}">Deal Product</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">{{(isset($product) && $product->id >
                                0) ? 'Update' : 'Add' }} Deal Product</li>
                        </ol>
                    </nav>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- Page content -->


<div class="container-fluid mt--7">
    <div class="row">
        <div class="col-xl-12 order-xl-1">
            <div class="card bg-secondary shadow">
                <div class="card-header bg-white border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0"> {{(isset($offerProduct) && $offerProduct->id >0) ? 'Update' : 'Add' }}
                                Deal Product</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if (count($errors) > 0)
                    <div class="alert alert-danger">
                        <strong>Whoops!</strong> There were some problems with your input.<br><br>
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    <form id="offer-product-form" name="offer-product-form"
                        action="@if(isset($offerProduct) && $offerProduct->id > 0 ) {{route('offer-product-update', ['id' => $offerProduct->id])}} @else {{route('offer-product-create')}} @endif"
                        method="post" autocomplete="off" enctype="multipart/form-data">
                        @csrf
                        <h6 class="heading-small text-muted mb-4">{{ __('Product information') }}</h6>

                        <div class="pl-lg-4">
                            @if(isset($offerProduct) && $offerProduct->id > 0)
                            <input type="hidden" name="product_id" id="" class="form-control form-control-alternative"
                                value="{{$product->id}}">
                            @else
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="product_id">Products</label>
                                        <select name="product_id" id="product_id"
                                            class="form-control form-control-alternative">
                                            <option value="" selected disabled>Select Product</option>
                                            @foreach($products as $product)
                                            <option value="{{ $product->id }}">{{$product->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            @endif
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="name">{{ __('Name') }}</label>
                                        <input type="text" name="name" id="name"
                                            class="form-control form-control-alternative" placeholder="{{ __('Name') }}"
                                            value="{{$product->name}}" autofocus>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="status">{{ __('Status') }}</label>
                                        <select name="status" id="status" class="form-control form-control-alternative">
                                            <option value="" selected disabled>Select Status</option>
                                            <option value="1" {{$offerProduct->status == 1 ? 'selected': '' }}>Active
                                            </option>
                                            <option value="0" {{$offerProduct->status == 0 ? 'selected': '' }}>Inactive
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label" for="description">Description</label>
                                        <textarea class="form-control form-control-alternative" rows="5"
                                            id="description" name="description"
                                            value="{{$product->description}}">{{$product->description}}</textarea>
                                    </div>
                                </div>
                            </div>
                            <h6 class="heading-small text-muted mb-4">{{ __('Product prices') }}</h6>
                            <div id="price_section" class="price_section_wrap">
                                <input type="hidden" name="totalSizes"
                                    value="@if(isset($variants) && count($variants) > 0 ) {{count($variants)}} @else 1 @endif "
                                    id="total_sizes_val">
                                @if(isset($variants) && count($variants) > 0 )
                                <div id="variants-list">
                                    @include('admin.daily-offer.variants-list')
                                </div>
                                @endif
                            </div>

                            <div class="text-center">
                                <button type="button" class="btn btn-success mt-4" onclick="save()"> {{(isset($product)
                                    && $product->id > 0) ? 'Update' : 'Add' }} Deal </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @include('admin.layouts.footers.auth')
</div>
@endsection
@push('js')

<script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>

{!! JsValidator::formRequest(\App\Http\Requests\Admin\DailyOfferProductRequest::class, '#offer-product-form'); !!}
<script>
    $(document).ready(function() {
        $("#product_id").select2({
            placeholder: "Select Product",
            allowClear: true
        });
                                $('#name').val('');
                        $('#description').val('');
        
        $(document).on('click', '.btn-plus-size', function() {
            var key = $(this).data('id');
            var id = $('#total_sizes_val').val();
            var total_sizes = "{{count($sizes)}}";
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            if (parseInt(id) < parseInt(total_sizes)) {
                $.ajax({
                    url: "{{route('add_more_offer_size')}}",
                    method: 'post',
                    data: {
                        _token: CSRF_TOKEN,
                        id: id,
                    },
                    success: function(result) {
                        $('#price_section').append(result.html);

                        var total = parseInt(id) + 1;
                        $('#total_sizes_val').val(total);
                    }
                });
            } else {
                swal({
                title: "",
                text: "Do not add more the " + total_sizes + " sizes",
                type: "warning",
                showCancelButton: false,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "Got It!",
                closeOnConfirm: true
            });
            }
        });
        $(document).on('click', '.btn-remove-size', function() {
            var id = $(this).data('id');
            removeHtml(id);
        });
    });

    $('#product_id').on('change', function() {

        let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        var id = $(this).val();
        $.ajax({
            type: "post",
            url: "{{route('get-product-details')}}",
            data: {
                _token: CSRF_TOKEN,
                product_id: $(this).val()
            },
            success: function(data) {
                if(data.success) {
                    if(data.product) {
                        $('#name').val(data.product.name);
                        $('#description').val(data.product.description);
                        if(data.variantsHtml && data.variant.length) {
                            $('#variants-list').html(data.variantsHtml);
                            $('#total_sizes_val').val(data.variant.length);
                        }
                    } else {
                        $('#name').val('');
                        $('#description').val('');
                    }
                } else {

                }
            }
        });
    });

    function removeHtml(id) {
        let total_sizes_val = $('#variant_val_' + id).val();
        swal({
                title: "",
                text: "Are you sure? Delete this!",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: true
            },
            function(isConfirm) {
                if (isConfirm) {
                    if (total_sizes_val !== '0' && total_sizes_val !== undefined && total_sizes_val !== '') {
                        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                        $.ajax({
                            url: "{{route('remove_offer_product_size')}}",
                            method: 'post',
                            data: {
                                _token: CSRF_TOKEN,
                                id: total_sizes_val
                            },
                            success: function(result) {
                                $('#prices_section' + id).remove();
                                var total = $('#total_sizes_val').val();
                                var total = parseInt(total) - 1;
                                $('#total_sizes_val').val(total);
                            }
                        });
                    } else {
                        $('#prices_section' + id).remove();
                        var total = $('#total_sizes_val').val();
                        var total = parseInt(total) - 1;
                        $('#total_sizes_val').val(total);
                    }

                } else {
                    swal("Cancelled", "Your Data is Safe!", "error");
                }
            });
    }

    function PreviewImage(no) {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage" + no).files[0]);
        oFReader.onload = function(oFREvent) {
            document.getElementById("uploadPreview" + no).src = oFREvent.target.result;
        };
    }

    function save() {
        let form = $("form[name='offer-product-form']");
        if (form.valid()) {
            $('form#offer-product-form').submit();
        }
    }

    $(document).on('click', '.btn-plus-img', function() {
        let html = '<div class="row">';
        html += '<div class="col-md-6 form-group">';
        html += ' <div class="input-group control-group">';
        html += '<input type="file" name="filename[]" class="form-control">';
        html += '<div class="input-group-btn">';
        html += '<button class="btn btn-danger cross-img" type="button">-</button>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';

        $('.img-section').append(html);
    });

    $(document).on('click', '.cross-img', function() {
        var id = $(this).attr('id');
        $(this).parent().parent().parent().remove();
    });
</script>

@endpush