@extends('admin.layout.master')

@section('content')

<div class="card sina-card">
    <div class="card-header card-header-s">
        <div class="d-flex justify-content-between">
            @if(get_guard()=='admin')
                <h4 class="col-6 pl-0">Complain Edit</h4>
            @else
                <h4 class="col-6 pl-0">Add New Complain</h4>
            @endif
            
            @php
                $index_route = 'customer.complain.index';
                if(get_guard()=='admin')
                    $index_route = 'complain.index';
            @endphp
            <a href="{{route($index_route)}}" class="btn btn-sm bg-white text-success add_new_notice">Complain List</a>
        </div>
    </div>
    <div class="card-body">
        @php
            $route = 'customer.complain.store';
            if(isset($row_id))
                $route = 'customer.complain.update';
        @endphp
        <form action="{{route($route)}}" method="post" enctype="multipart/form-data">
            @csrf
            @isset($row_id)
                <input type="hidden" name="row_id" value="{{$row_id}}">
            @endisset
            <div class="row">
                <div class="col-8 offset-2">
                    <div class="form-group">
                        <label for="">Date</label>
                        <input type="text" @empty($row_id) value="{{date('d-m-Y')}}" @endempty @isset($row_id) value="{{date('d-m-Y', strtotime($info->date))}}" @endisset class="date_picker form-control" name="date" required>
                    </div>
                    <div class="form-group">
                        <label for="">Objection Type</label><br>
                        @foreach (complainTypes() as $key=>$ot)
                            <div class="d-inline mr-2">
                                <input class="type" @isset($row_id) @if($info->type == $key) checked @endif @endisset @empty($row_id) @if($key==1) checked @endif @endempty type="radio" name="type" id="type{{$key}}" value="{{$key}}">
                                <label class="pl-2" for="type{{$key}}">{{$ot}}</label>
                            </div>
                        @endforeach
                    </div>
                    <div class="form-group show_design_no">
                        <label for="">Design No.</label>
                        <input type="text" @isset($row_id) value="{{$info->design_no}}" @endisset class="form-control" name="design_no">
                    </div>
                    <div class="form-group show_product">
                        <label for="">Category</label><br>
                        <select name="category_id" class="form-control select_2 category">
                            <option value="">Select Category</option>
                            @foreach (getOrderCategory(1) as $cat)
                                <option @isset($row_id) @if($info->category_id == $cat->id) selected  @endif @endisset value="{{$cat->code}}">{{$cat->name_eng}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group show_product">
                        <label for="">Product</label>
                        <select name="product_ids[]" class="select_2 products form-control" multiple></select>
                    </div>
                    <div class="form-group show_quantity">
                        <label for="">Quantity</label>
                        <input type="text" @isset($row_id) value="{{$info->quantity}}" @endisset class="form-control quantity" name="quantity">
                    </div>
                    <div class="form-group">
                        <label for="">Objection</label>
                        <select name="objection_id" id="" class="form-control select_2">
                            @foreach ($objections as $obj)
                                <option @isset($row_id) @if($info->objection_id == $obj->id) selected @endif @endisset value="{{$obj->id}}">{{$obj->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    @if(get_guard()=='customer')
                        <div class="form-group">
                            <label for="">Image</label>
                            <input type="file" onChange="validateFile(this.value)" id="img" name="img" class="form-control">
                        </div>
                    @endif
                    <div class="form-group">
                        <label for="">Note</label>
                        <textarea name="note" cols="30" rows="2" class="form-control">@isset($row_id){{$info->note}}@endif</textarea>
                    </div>
                    <div class="formgro">
                        <button class="btn btn-success btn-sm">Submit</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript" src="{{ asset('inventory/blade_js/common.js') }}"></script>
    <script>
        const store_setting = @json(store_info());

        $(document).ready(function() {
            $(document).on('change', '.type', function(){
                field_show_hide();
            });
            field_show_hide();
        });
        $('.select_2').select2();
        
        $('.category').change(function(){
            productFetchOnCategorySelect($(this).val());
        });

        function productFetchOnCategorySelect(cat_code=null){
            $('.products').val('').trigger('change');
            ajaxCall('/customer/load-product-by-category','GET',{cat_code:cat_code}, function(data){
                let options = '';
                $.each(data, function(key,val){
                    options += `<option value="${val.id}">${val.name_eng}</option>`;
                });
                $('.products').html(options);
                setProducts();
                console.log(options);
            });
        }

        function field_show_hide(){
            type = $('.type:checked').val();
            if(type==1){
                $('.show_product').hide();
                $('.show_design_no').show();
                $('.show_quantity').show();
            }else if(type==2){
                $('.show_product').show();
                $('.show_design_no').hide();
                $('.show_quantity').show();
            }else{
                $('.show_product').hide();
                $('.show_design_no').hide();
                $('.show_quantity').hide();
            }
        }

        function validateFile(file) {
            var ext = file.split(".");
            ext = ext[ext.length-1].toLowerCase();      
            var arrayExtensions = ["jpg" , "jpeg", "png"];

            if (arrayExtensions.lastIndexOf(ext) == -1) {
                alert("File Type Is Not Allowed.\nAcceptable File Types: "+arrayExtensions);
                $("#img").val("");
            }
        }
    </script>
    @isset($row_id)
        <script>
            $(document).ready(function(){
                productFetchOnCategorySelect($('.category').val());
            });
            function setProducts(){
                console.log("e232323",{{implode(',', $info->product_ids)}});
                $('.products').val([{{implode(',', $info->product_ids)}}]);
                $('.products').trigger('change');
            }
        </script>
    @endisset
    @empty($row_id)
        <script>
            function setProducts(){
                console.log("Create");
            }
        </script>
    @endempty

@endsection