@extends('layouts.app')

@section('styles')

    <!-- Data table css -->
    <link href="{{URL::asset('assets/plugins/datatable/dataTables.bootstrap4.min.css')}}" rel="stylesheet" />
    <link href="{{URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css')}}"  rel="stylesheet">
    <link href="{{URL::asset('assets/plugins/datatable/responsivebootstrap4.min.css')}}" rel="stylesheet" />

    <!---Tabs css-->
    <link href="{{ URL::asset('assets/plugins/tabs/tabs-style.css') }}" rel="stylesheet" />

    <!--Select2 css -->
    <link href="{{ URL::asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />

    <!-- Datetime Picker css-->
    <link rel="stylesheet" href="{{ URL::asset('assets/plugins/datetime-picker/bootstrap-datetimepicker.min.css') }}">

    <!-- File Uploads css-->
    <link href="{{ URL::asset('assets/plugins/fileuploads/css/dropify.css') }}" rel="stylesheet" type="text/css" />

    <!--Mutipleselect css-->
    <link rel="stylesheet" href="{{ URL::asset('assets/plugins/multipleselect/multiple-select.css') }}">

    <style>
        .vat-label-error{
          color: red !important;
        }
        input[type="text"]::placeholder {
            color: #babcc4; /* Replace with the color you want */
        }

        .tag {
            text-align: center;
            padding: 0px 5px 0px 10px;

            border-radius: 6px;
            position: relative;
            user-select: text;
            overflow: hidden;
            line-height: 2;

            background: #f5f5f5;
            border: 1px solid #ddd;
            color: #544b4b;
        }

        .tag i {
            cursor: pointer;
            margin-left: 8px;
            line-height: inherit;
        }

        .tag.addmore input {
            border: none;
            background: transparent;
            min-width: 40px;
            width: 80px;
        }

        .tag.addmore {
            background-color: rgba(172, 201, 244, 0.43);
            color: #0b4eac;
            border: 1px solid #3182f5;
        }

        .flag{
            width:1.3rem;
        }
    </style>

@endsection

@section('content')

    <!-- page-header -->
    <div class="page-header">
        <ol class="breadcrumb">
            <!-- breadcrumb -->
            <li class="breadcrumb-item"><a href="{{ route('admin.services.'. $url_service . '-add.index') }}">{{ strtoupper($url_service) }} Additional Services</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ strtoupper($url_service) }} Additional Services Form</li>
 
        </ol>
    </div>
    <!-- End page-header -->

    <!-- row -->
    <div class="row">

        <div class="col-md-12">
            <form id="data-form" name="data-form" onsubmit="setSave('{{ $url_service }}/additional'); return false;" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="id" name="id" value="{{ !empty($data->id) ? $data->id : '0' }}">

                <!-- Plan Information -->
                <div class="card">
                    <div class="card-header pb-0">
                        <h3 class="card-title">Service information</h3>
                    </div>
                    <div class="card-body">
                        <div class="panel panel-primary">
                            <div class="row">

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">Select Plan</label>
                                        <select id="select_plan" name="select_plan" class="form-control" onchange="pickPlan(this.value);">
                                            @if($select_plan)
                                                <option value="0">-- Select available plan for this service --</option>
                                                @foreach($select_plan as $v)
                                                    <option value="{{ $v->id . '#|#' . $v->plan_name }}">{{ $v->plan_name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">Available for Plan <span style="color:orange">(Show to All plans if EMPTY)</span></label>
                                        <div class="plan-group">
                                            @if( !empty($available_plans) && !empty($available_plans_name) )
                                                @foreach ($available_plans as $k => $id)
                                                    <span class="tag" style="background: #a0f9af"> {{ $available_plans_name[$k] }} <i onclick="deletePlan('{{ $id }}','{{ $available_plans_name[$k] }}', this);" class="fa fa-times-circle delete-plan"></i></span>
                                                @endforeach
                                            @endif
                                        </div>
                                        <input type="hidden" name="plan" id="plan" value="{{ !empty($data->plan) ? $data->plan :'' }}"/>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Service name (LA) <i class="flag flag-la"></i></label>
                                        <input type="text" class="form-control" name="name-la" placeholder="Service name (Lao)" value="{{ !empty($data->name['la']) ? $data->name['la'] : '' }}">
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Service name (TH) <i class="flag flag-th"></i></label>
                                        <input type="text" class="form-control" name="name-th" placeholder="Service name (Thai)" value="{{ !empty($data->name['th']) ? $data->name['th'] : '' }}">
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Service name (EN) <i class="flag flag-gb"></i></label>
                                        <input type="text" class="form-control" name="name-en" placeholder="Service name (English)" value="{{ !empty($data->name['en']) ? $data->name['en'] : '' }}">
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Detail (LA) <i class="flag flag-la"></i></label>
                                        <textarea class="form-control" name="detail-la" rows="5" placeholder="Detail (Lao)">{{ !empty($data->detail['la']) ? $data->detail['la'] : '' }}</textarea>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Detail (TH) <i class="flag flag-th"></i></label>
                                        <textarea class="form-control" name="detail-th" rows="5" placeholder="Detail (Thai)">{{ !empty($data->detail['th']) ? $data->detail['th'] : '' }}</textarea>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Detail (EN) <i class="flag flag-gb"></i></label>
                                        <textarea class="form-control" name="detail-en" rows="5" placeholder="Detail (English)">{{ !empty($data->detail['en']) ? $data->detail['en'] : '' }}</textarea>
                                    </div>
                                </div>


	                        </div> 
	                    </div>
	                </div>
	            </div>

                <!-- ! Plan Information -->

                <!-- Price List -->
                <div class="card">
                    <div class="card-header pb-0">
                        <h3 class="card-title">Prices <span style="color:orange">(Individual price or monthly and yearly price )</span></h3>
                    </div>
                    <div class="card-body">
                        <div class="panel panel-primary">
                            <div class="row">


                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-label">Price type</label>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input type-tadio" type="radio" name="price_type" id="status_enable" value="1"
                                                {{ isset($data->prices['type']) ? ($data->prices['type'] == 1 ? 'checked' : '') : 'checked' }}>
                                            <label class="form-check-label" for="status_enable">Individual price</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input type-tadio" type="radio" name="price_type" id="status_disable" value="2"
                                                {{ isset($data->prices['type']) ? ($data->prices['type'] == 2 ? 'checked' : '') : '' }}>
                                            <label class="form-check-label" for="status_disable">Montly and Yearly price</label>
                                        </div>
                                    </div>
                                </div>

                                <!-- INDIVIDUAL PRICE -->

                                <div class="wha-price-ind col-md-3" {{ isset($data->prices['type']) && $data->prices['type'] == 2 ? 'style=display:none;' : '' }}>
                                    <div class="form-group">
                                        <label class="form-label">Price Amount <span style="color:orange">(Number Only)</span></label>
                                        <input type="text" class="form-control" name="wha-ind-price" placeholder="Price Amount (number)" value="{{ !empty($data->prices['individual_price']) ? $data->prices['individual_price'] : '0' }}" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                                    </div>
                                </div>

                                <div class="wha-price-ind col-md-3" {{ isset($data->prices['type']) && $data->prices['type'] == 2 ? 'style=display:none;' : '' }}>
                                    <div class="form-group">
                                        <label class="form-label">Discount % <span style="color:orange">(Number Only)</span></label>
                                        <input type="text" class="form-control" name="wha-ind-discount" placeholder="Discount % (number)" value="{{ !empty($data->prices['individual_discount']) ? $data->prices['individual_discount'] : '0' }}" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                                    </div>
                                </div>

                                <!-- ! INDIVIDUAL PRICE -->



                                <!-- PRICE PER MONTH OR YEAR -->

                                <div class="wha-price-per col-md-2" {{ empty($data->prices) || $data->prices['type'] != 2 ? 'style=display:none;' : '' }} >
                                    <div class="form-group">
                                        <label class="form-label">Unit</label>
                                        <select name="wh-price-unit[]" class="form-control">
                                            <option value="Monthly">Monthly</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="wha-price-per col-md-3" {{ empty($data->prices) || $data->prices['type'] != 2 ? 'style=display:none;' : '' }}>
                                    <div class="form-group">
                                        <label class="form-label">Price Amount <span style="color:orange">(Number Only)</span></label>
                                        <input type="text" class="form-control" name="wha-month-price" placeholder="Price Amount (number)" value="{{ !empty($data->prices['month_price']) ? $data->prices['month_price'] : '0' }}" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                                    </div>
                                </div>

                                <div class="wha-price-per col-md-3" {{ empty($data->prices) || $data->prices['type'] != 2 ? 'style=display:none;' : '' }}>
                                    <div class="form-group">
                                        <label class="form-label">Discount % <span style="color:orange">(Number Only)</span></label>
                                        <input type="text" class="form-control" name="wha-month-discount" placeholder="Discount % (number)" value="{{ !empty($data->prices['month_discount']) ? $data->prices['month_discount'] : '0' }}" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                                    </div>
                                </div>

                                <div class="wha-price-per col-md-4" {{ empty($data->prices) || $data->prices['type'] != 2 ? 'style=display:none;' : '' }}>

                                </div>



                                <div class="wha-price-per col-md-2" {{ empty($data->prices) || $data->prices['type'] != 2 ? 'style=display:none;' : '' }}>
                                    <div class="form-group">
                                        <!-- <label class="form-label">Unit</label> -->
                                        <select name="wh-price-unit[]" class="form-control">
                                            <option value="Yearly">Yearly</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="wha-price-per col-md-3" {{ empty($data->prices) || $data->prices['type'] != 2 ? 'style=display:none;' : '' }}>
                                    <div class="form-group">
                                        <!-- <label class="form-label">Price Amount <span style="color:orange">(Number Only)</span></label> -->
                                        <input type="text" class="form-control" name="wha-year-price" placeholder="Price Amount (number)" value="{{ !empty($data->prices['year_price']) ? $data->prices['year_price'] : '0' }}" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                                    </div>
                                </div>

                                <div class="wha-price-per col-md-3" {{ empty($data->prices) || $data->prices['type'] != 2 ? 'style=display:none;' : '' }}>
                                    <div class="form-group">
                                        <!-- <label class="form-label">Discount Amount <span style="color:orange">(Number Only)</span></label> -->
                                        <input type="text" class="form-control" name="wha-year-discount" placeholder="Discount Amount (number)" value="{{ !empty($data->prices['year_discount']) ? $data->prices['year_discount'] : '0' }}" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                                    </div>
                                </div>


                            </div>
                        </div> 
                    </div>
                </div>

                <div class="card">
                    <div class="card-header pb-0">
                        <h3 class="card-title">Visibility <span style="color:orange">(Visibility on order page)</span></h3>
                    </div>
                    <div class="card-body">
                        <div class="panel panel-primary">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="status" id="status_enable" value="1"
                                                    {{ isset($data->status) ? ($data->status == 1 ? 'checked' : '') : 'checked' }}>
                                        <label class="form-check-label" for="status_enable">Visible</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="status" id="status_disable" value="0"
                                                    {{ isset($data->status) ? ($data->status == 0 ? 'checked' : '') : '' }}>
                                        <label class="form-check-label" for="status_disable">Invisible</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
               
                <div class="col-md-12" style="margin-top:30px;">
                    <div class="form-group">
                        <div class="btn-list">
                            <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i>
                            Save</button>
                            <button onclick="mwz_redirect('{{ route('admin.services.'.$url_service.'-add.index') }}');"
                            type="button" class="btn btn-warning"><i class="fa fa-undo"
                            aria-hidden="true"></i>Cancel</button>
                        </div>
                    </div>
                </div>

            </div>

        </form>

    </div>

</div>
<!-- .row -->


<!-- WH PRICE HTML-->
<div id="wh-price-html" style="display:none;">


    <div class="wh-price-x_row col-md-2">
        <div class="form-group">
            <label class="form-label">Unit Amount</label>
            <input type="text" class="form-control wh-price" name="wh-price-unit-amount[]" placeholder="Unit Amount" value="1" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
        </div>
    </div>

    <div class="wh-price-x_row col-md-2">
        <div class="form-group">
            <label class="form-label">Unit</label>
            <select name="wh-price-unit[]" class="form-control">
                <option value="Month">Month</option>
                <option value="Year">Year</option>
            </select>
        </div>
    </div>

    <div class="wh-price-x_row col-md-3">
        <div class="form-group">
            <label class="form-label">Price Amount <span style="color:orange">(Number Only)</span></label>
            <input type="text" class="form-control" name="wh-price[]" placeholder="Price Amount (number)" value="0" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
        </div>
    </div>

    <div class="wh-price-x_row col-md-3">
        <div class="form-group">
            <label class="form-label">Discount Amount <span style="color:orange">(Number Only)</span></label>
            <input type="text" class="form-control" name="wh-discount[]" placeholder="Discount Amount (number)" value="0" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
        </div>
    </div>

    <div class="wh-price-x_row col-md-1">
        <div class="form-group">
            <label class="form-label">&nbsp;</label>
            <button type="button" class="btn btn-danger" onclick="deletePrice('wh','x_row');"><i class="fa fa-trash"></i></button>
         </div>
    </div>

</div>
<!-- !WH PRICE HTML -->

        
@endsection('content')

@section('scripts')

   
    <!--Jquery Sparkline js-->
    <script src="{{ URL::asset('assets/plugins/vendors/jquery.sparkline.min.js') }}"></script>

    <!-- File uploads js -->
    <script src="{{ URL::asset('assets/plugins/fileuploads/js/dropify.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/fileuploads/js/dropify-demo.js') }}"></script>

    <!--Select2 js -->
    <script src="{{ URL::asset('assets/plugins/select2/select2.full.min.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/js/form-elements.js') }}"></script> -->

    <!--MutipleSelect js-->
    <script src="{{ URL::asset('assets/plugins/multipleselect/multiple-select.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/multipleselect/multi-select.js') }}"></script>

    <!--ckeditor js-->
    <script src="{{ URL::asset('assets/plugins/tinymce/tinymce.min.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/js/formeditor.js') }}"></script> -->

    <!-- Datetimepicker js -->
    <script src="{{ URL::asset('assets/plugins/datetime-picker/moment.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datetime-picker/bootstrap-datetimepicker.min.js') }}"></script>

    <!-- INTERNAL Data tables -->
    <script src="{{URL::asset('assets/plugins/datatable/js/jquery.dataTables.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/dataTables.bootstrap4.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/dataTables.buttons.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.bootstrap4.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/jszip.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/pdfmake.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/vfs_fonts.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.html5.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.print.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.colVis.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/dataTables.responsive.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/responsive.bootstrap4.min.js')}}"></script>
    <!-- <script src="{{URL::asset('assets/plugins/datatable/datatable-2.js')}}"></script> -->
    
    <!-- Notifications js -->
    <link href="{{URL::asset('assets/plugins/notify-growl/css/jquery.growl.css')}}" rel="stylesheet" />
    <link href="{{URL::asset('assets/plugins/notify-growl/css/notifIt.css')}}" rel="stylesheet" />
    <script src="{{URL::asset('assets/plugins/bootbox/bootbox.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/notify-growl/js/rainbow.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/notify-growl/js/jquery.growl.js')}}"></script>

    <!-- validator js -->
    <script src="{{ URL::asset('assets/plugins/validator/js/jquery.validate.min.js') }}"></script>

    <!-- Tabs js -->
    <script src="{{ URL::asset('assets/plugins/tabs/jquery.multipurpose_tabcontent.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/plugins/tabs/tabs.js') }}"></script> -->

    <script src="{{ URL::asset('assets/plugins/typeahead/bootstrap3-typeahead.min.js') }}"></script>


    <!-- mwz master js css -->
    <link rel="stylesheet" href="{{ mix('css/mwz.css') }}">
    <script src="{{ mix('js/mwz.js')  }}"></script>

    <!-- module js css -->
    <link rel="stylesheet" href="{{ mix('css/services.css') }}">
    <script src="{{ mix('js/services.js') }}"></script>

    <script type="text/javascript">

    	var priceCount = {{ $price_count }};

        validatePrice = function(input) {
          // Remove any non-numeric and non-decimal characters
          input.value = input.value.replace(/[^0-9]/g, '');

          // Ensure there's only one decimal point
          let decimalCount = (input.value.match(/\./g) || []).length;
          if (decimalCount > 1) {
            input.value = input.value.substring(0, input.value.lastIndexOf('.'));
          }
        }

        $(document).ready(function(){
            $('.type-tadio').change(function(){
                var selectedValue = $(this).val();
                if(selectedValue == 1){
                   $('.wha-price-ind').show(0);
                   $('.wha-price-per').hide(0);
                }else{
                   $('.wha-price-per').show(0);
                   $('.wha-price-ind').hide(0);
                }
            });
        });
        
    </script>

@endsection