@extends('admin.layouts.contentLayoutMaster')

@section('title','商品編輯')

@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/keen/image-input.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/flatpickr/flatpickr.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/forms/spinner/jquery.bootstrap-touchspin.css') }}">
@endsection

@section('page-styles')

@endsection

@section('content')
<section id="basic-horizontal-layouts">
    <div class="row match-height justify-content-center">
        <div class="col-md-10 col-12">
            <form class="form form-horizontal" action="{{ Route('admin.products.update', $product->id) }}" method="POST" id="main_form" enctype="multipart/form-data">
                @csrf
                @method('PATCH')
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title"></h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-1 offset-md-3">
                                        <label>廠商</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <select class="form-control" id="firm_id" name="firm_id">
                                            <option> </option>
                                            @foreach ($firms as $key => $value)
                                            <option value="{{ $key }}" {{ $key == old('firm_id', $product->firm_id) ? 'selected' : '' }} >{{ $value }}</option>
                                            @endforeach
                                        </select>
                                        
                                        @if ($errors->has('firm_id')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('firm_id') ]) 
                                        @endif
                                    </div>
                                    <div class="col-md-1 offset-md-3">
                                        <label>商品名稱</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input class="form-control" id="name" name="name" placeholder="商品名稱" type="text" value="{{ old('name', $product->name) }}">
                                        @if ($errors->has('name')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('name') ]) 
                                        @endif
                                    </div>
                                    <div class="col-md-1 offset-md-3">
                                        <label>商品圖片</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <div class="col-md-6 form-group ">
                                        </div> 
                                        <div class="keen-image-input keen-image-input-outline" id="product_image">
                                            <div class="keen-image-input-wrapper" style="background-image: url({{ app('ImageHandler')->get($product->image) }});"></div>
                                            <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="上傳圖片">
                                                <i class="bx bx-edit icon-xs text-muted"></i>
                                                <input type="file" name="product_image" accept=".png, .jpg, .jpeg">
                                                <input type="hidden" name="product_image_remove" value="0">
                                            </label>
                                            <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="" data-original-title="刪除圖片">
                                                <i class='bx bx-x icon-xs text-muted' ></i>
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-1 offset-md-3">
                                        <label>描述</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <textarea class="form-control" id="description" name="description" rows="5" placeholder="描述">{{ old('description', $product->description) }}</textarea>
                                        @if ($errors->has('description')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('description') ]) 
                                        @endif
                                    </div>
                                    
                                    <div class="col-md-1 offset-md-3">
                                        <label>注意事項</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <textarea class="form-control" id="notice" name="notice" rows="3" placeholder="注意事項">{{ old('notice', $product->notice) }}</textarea>
                                        @if ($errors->has('notice')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('notice') ]) 
                                        @endif
                                    </div>
                                    
                                    <div class="col-md-1 offset-md-3">
                                        <label>通知訊息</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <textarea class="form-control" id="notify" name="notify" rows="3" placeholder="通知訊息">{{ old('notify', $product->notify) }}</textarea>
                                        @if ($errors->has('notify')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('notify') ]) 
                                        @endif
                                    </div>
                                    
                                    
                                    
                                    <div class="col-md-1 offset-md-3">
                                        <label>點數</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input class="form-control" id="point" name="point" placeholder="點數" type="text" value="{{ old('point', $product->point) }}">
                                        @if ($errors->has('point')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('point') ]) 
                                        @endif
                                    </div>
                                    <div class="col-md-1 offset-md-3">
                                        <label>庫存</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input class="form-control" id="stock" name="stock" placeholder="數量" type="text" value="{{ old('stock', $product->stock) }}">
                                        @if ($errors->has('stock')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('stock') ]) 
                                        @endif
                                    </div>

                                    <div class="col-md-1 offset-md-3">
                                        <label>上下架時間</label>
                                    </div>
                                    <div class="col-md-3 form-group">
                                        <input class="form-control publish_flatpickr" id="publish_start_at" name="publish_start_at" placeholder="日期時間" type="text" value="{{ $product->publish_start_at->format('Y-m-d H:i') }}">
                                        @if ($errors->has('publish_start_at')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('publish_start_at') ]) 
                                        @endif
                                    </div>
                                    <span style="padding-top:7px;">
                                        - 
                                    </span>
                                    <div class="col-md-3 form-group">
                                        <input class="form-control publish_flatpickr" id="publish_end_at" name="publish_end_at" placeholder="日期時間" type="text" value="{{ $product->publish_end_at->format('Y-m-d H:i') }}">
                                        @if ($errors->has('publish_end_at')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('publish_end_at') ]) 
                                        @endif
                                    </div> 

                                    <div class="col-md-1 offset-md-3">
                                        <label>開放服務</label>
                                    </div>
                                    <div class="col-md-6 form-group" id="services_block">
                                      
                                    </div>

                                    <div class="col-md-1 offset-md-3">
                                        <label>開放等級</label>
                                    </div>
                                    <div class="col-md-6 form-group" id="ranks_block">
                                        
                                    </div>

                                    <div class="col-md-2 offset-md-2 text-right">
                                        <label>最多可兌換次數</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input class="form-control" id="maximum_times" name="maximum_times" placeholder="會員最多可兌換次數" type="text" value="{{ old('maximum_times', $product->maximum_times) }}">
                                        @if ($errors->has('maximum_times')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('maximum_times') ]) 
                                        @endif
                                    </div>

                                    <div class="col-md-2 offset-md-2 text-right">
                                        <label>每次最多可兌換</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input class="form-control" id="maximum_quantity_per_times" name="maximum_quantity_per_times" placeholder="會員每次可兌換最高數量" type="text" value="{{ old('maximum_quantity_per_times',  $product->maximum_quantity_per_times) }}">
                                        @if ($errors->has('maximum_quantity_per_times')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('maximum_quantity_per_times') ]) 
                                        @endif
                                    </div>                                    

                                    <div class="col-md-1 offset-md-3">
                                        <label>啟用</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <div class="custom-control custom-switch custom-control-inline mb-1">
                                            <input type="checkbox" class="custom-control-input" id="status" name="status" value="1" {{ old('status', true) ? 'checked' : '' }}>
                                            <label class="custom-control-label mr-1" for="status">
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="row">
                                <div class="col-lg-8 ml-lg-auto">
                                    <button class="btn btn-primary mr-1 mb-1" type="submit">Submit</button> 
                                    <button class="btn btn-light glow mr-1 mb-1" type="reset" data-force="1">Reset</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

@section('vendor-scripts')
<script src="{{ asset('vendors/js/keen/image-input.js') }}"></script>
{{-- 日期時間下拉 --}}
<script src="{{ asset('plugins/flatpickr/flatpickr.min.js') }}"></script>
{{-- touchspin 按鈕 --}}
<script src="{{ asset('vendors/js/forms/spinner/jquery.bootstrap-touchspin.js') }}"></script>
{{-- validation --}}
<script src="{{ asset('vendors/js/forms/validation/jquery.validate.min.js') }}"></script>
<script src="{{ asset('vendors/js/forms/validation/jqBootstrapValidation.js') }}"></script>
{{-- tinyMCE --}}
<script src="{{ asset('plugins/tinymce/tinymce.min.js') }}" ></script>
@endsection

@section('page-scripts')
<script>
    const Ajax = {
        'getFirmServiceAndRanks' : '{{  Route("ajax.admin.product.get.firmServiceAndRanks") }}',
    }
    const hasServicesId = {!! json_encode($product->services->pluck('id')->toArray()) !!};
    const hasRanksId = {!! json_encode($product->ranks->pluck('id')->toArray()) !!};
</script>
<script src="{{ mix('assets/js/admin/product/form.js') }}"></script>
<script>
    getFirmServiceAndRanks(function() {
        // service
        $('#services_block .checkbox-service')
            .prop('checked', false)
            .filter(function() {
                return  hasServicesId.indexOf($(this).data('id')) >= 0
            })
            .prop('checked', true);
        
        // rank
        $('#ranks_block .checkbox-rank')
            .prop('checked', false)
            .filter(function() {
                return  hasRanksId.indexOf($(this).data('id')) >= 0
            })
            .prop('checked', true);
    });
</script>
@endsection