@extends('admin.layouts.contentLayoutMaster')

@section('title','會員點數')

@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/forms/spinner/jquery.bootstrap-touchspin.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/flatpickr/flatpickr.min.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.points.store') }}" method="POST" id="main_form">
                @csrf
                <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 $firm)
                                                <option value="{{ $firm->id }}" {{ $firm->id == old('firm_id') ? 'selected' : '' }} >{{ $firm->name }}</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="code" name="code" placeholder="編碼" type="text" value="{{ old('code') }}">
                                        @if ($errors->has('code')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('code') ]) 
                                        @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') }}">
                                        @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">
                                        <textarea class="form-control" name="description" id="description" rows="10">{{ old('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-3 form-group">
                                        <input class="form-control publish_flatpickr" id="publish_start_at" name="publish_start_at" placeholder="日期時間" type="text" value="{{ Carbon\Carbon::now()->format('Y-m-d 00:00') }}">
                                        @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="{{ Carbon\Carbon::now()->addYear(1)->format('Y-m-d 23:59') }}">
                                        @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">
                                        <input class="form-control touchspin" id="have_days" name="have_days" placeholder="有效天數" type="text" value="{{ old('have_days', 180) }}">
                                        @if ($errors->has('have_days')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('have_days') ]) 
                                        @endif
                                    </div>


                                    <div class="col-md-1 offset-md-3">
                                        <label>項目</label>
                                    </div>
                                    <div class="col-md-8 form-group">
                                        <input type="hidden" name="items_json" id="items_json">
                                        <div class="table-responsive" id="items_table">
                                            <table class="table table-hover mb-0">
                                                <thead>
                                                    <tr>
                                                        <th style="width:5%;"></th>
                                                        <th class="text-center" style="width:30%;">點數</th>
                                                        <th class="text-center" style="width:30%;">消費額度</th>
                                                        <th class="text-center" style="width:35%;">消費轉換次數</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr 
                                                        data-status="1"
                                                    >
                                                        <td class="text-center">
                                                            <i class="cursor-pointer badge-circle badge-circle-success bx bx-plus font-medium-1 add_item"></i>                       
                                                        </td>
                                                        <td class="point_td">
                                                            <input class="form-control touchspin point" placeholder="點數" type="text" value="10">
                                                        </td>
                                                        <td class="per_amounts_td">
                                                            <input class="form-control touchspin per_amounts" placeholder="消費額度" type="text" value="0">
                                                        </td>
                                                        <td class="times_td">
                                                            <div class="row">
                                                                <div class="col-md-10">
                                                                    <input class="form-control touchspin times" placeholder="次數" type="text" value="1">
                                                                    
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <button type="button" class="btn btn-icon rounded-circle btn-outline-primary glow infinite_times">
                                                                        <i class="bx bx-infinite"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </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('plugins/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('plugins/tw-city-selector/tw-city-selector.min.js') }}"></script>
<script src="{{ asset('vendors/js/forms/spinner/jquery.bootstrap-touchspin.js') }}"></script>
@endsection

@section('page-scripts')
<script>
    const max_times = {{ config('point.max_times') }};
    let Items = [];
</script>
{{-- <script src="{{ mix('assets/js/admin/point/form.js') }}"></script> --}}
@endsection