@extends('back_office.layouts.app')

@section('content')
    <style>
        input[type="color"] {
            -webkit-appearance: none;
            border: none;
            width: 90px;
            height: 32px;
        }
        input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }
        input[type="color"]::-webkit-color-swatch {
            border: none;
        }
    </style>
<div>
    <div class="container-fluid">
        <div class="p-4 bg-white row">
            <h5>Create new package</h5>
            <form class="form-horizontal" action="{{ route('store-package') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Car Type</label>
                            <select class="form-control" name="car_type" id="type">
                                @foreach($types as $key=> $type)
                                <option value="{{$type->id}}">{{$type->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Package name</label>
                            <input type="text" placeholder="Pacakage name" name="name" id="name" class="form-control @error('name') is-invalid @enderror" />
                            @error('name')
                            <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Package arabic name</label>
                            <input type="text" placeholder="Package arabic name" name="ar_name" id="ar_name" class="form-control"/>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Note</label>
                            <input type="text" placeholder="Note" name="note" id="note" class="form-control" />
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Arabic Note</label>
                            <input type="text" placeholder="Arabic Note" name="ar_note" id="ar_note" class="form-control" />
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Monthly price</label>
                            <input placeholder="Pacakage price" name="monthly_price" id="monthly_price" class="form-control @error('monthly_price') is-invalid @enderror" />
                            @error('monthly_price')
                            <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Discount price</label>
                            <input placeholder="Pacakage price after discount" name="discount_price" id="discount_price" class="form-control"/>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Color</label>
                            <input type="color" style="float: right" id="color" name="color" value="#e66465">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Weekly wash times</label>
                            <input type="number" placeholder="Wash times" name="weekly_wash_times" id="weekly_wash_times" class="form-control @error('weekly_wash_times') is-invalid @enderror" />
                            @error('weekly_wash_times')
                            <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Monthly wash times</label>
                            <p x-text="monthlyTimes()"></p>
                            <input type="number" placeholder="Monthly times" name="monthly_wash_times" id="monthly_wash_times" class="form-control  @error('monthly_wash_times') is-invalid @enderror" />
                            @error('monthly_wash_times')
                            <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Max freeze times</label>
                            <p x-text="monthlyTimes()"></p>
                            <input type="number" placeholder="Max freeze times" name="max_freeze_times" id="max_freeze_times" class="form-control  @error('max_freeze_times') is-invalid @enderror" />
                            @error('max_freeze_times')
                            <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label>Wash Days
                            @error('options')
                            <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </label>
                        <div class="table-responsive p-0">
                            <table class="table align-items-center justify-content-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Plan ID</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Days</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Actions</th>
                                    </tr>
                                </thead>
                                <tbody x-data="dayForm()">
                                    <template x-for="(option, indexOption) in options" :key="indexOption">
                                        <tr>
                                            <td class="align-middle">
                                                <div style="display: flex;">
                                                    <Strong>Option - </Strong>
                                                    <p x-text="indexOption + 1"></p>
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <template x-for="day in days">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" name="day.name" @change="toggleDay(indexOption, day.id)">
                                                            <label class="custom-control-label" style="margin-top: 5px;" x-text="day.name"></label>
                                                        </div>
                                                    </template>
                                                </div>
                                            </td>
                                            <td class="align-middle">
                                                <button type="button" class="btn btn-link text-danger mb-0" @click="removeOption(indexOption)">
                                                    <i class=" fa fa-trash text-xs" aria-hidden="true"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </template>
                                    <td colspan="4" class="text-left"><button type="button" class="btn btn-secondary" @click="addOption()">+ Add Row</button></td>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <input id="input_hidden_field" type="hidden" name="options">

                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="col-lg-12 text-right">
                                <button type="submit" class="btn btn-info">Save Package</button>
                            </div>
                        </div>
                    </div>
                </div>

            </form>

        </div>
    </div>
</div>
@endsection


<script>
    let dayForm = function() {
        return {
            options: [],
            dataArray: [],
            days: [{
                    id: '1',
                    name: 'Monday',
                    date: 'Jan 1'
                },
                {
                    id: '2',
                    name: 'Tuesday',
                    date: 'Jan 2'
                },
                {
                    id: '3',
                    name: 'Wednesday',
                    date: 'Jan 3'
                },
                {
                    id: '4',
                    name: 'Thursday',
                    date: 'Jan 4'
                },
                {
                    id: '5',
                    name: 'Friday',
                    date: 'Jan 5'
                },
                {
                    id: '6',
                    name: 'Saturday',
                    date: 'Jan 6'
                },
                {
                    id: '7',
                    name: 'Sunday',
                    date: 'Jan 7'
                },

            ],

            addOption() {
                this.count++;
                this.options.push({
                    id: this.count,
                });
                this.dataArray.push([]);
            },
            removeOption(index) {
                this.count--;
                this.options.splice(index, 1);
            },

            count() {
                return this.options.length;
            },

            toggleDay(optionIndex, dayId) {
                if (this.daySelected(optionIndex, dayId)) {
                    this.dataArray[optionIndex] = this.dataArray[optionIndex].filter(h => h !== dayId)
                } else {
                    this.dataArray[optionIndex].push(dayId)
                }
                console.log(JSON.stringify(this.dataArray));
                $('#input_hidden_field').val(JSON.stringify(this.dataArray)); //store array
            },
            daySelected(optionIndex, dayId) {
                return this.dataArray[optionIndex].indexOf(dayId) > -1;
            }
        }
    }
</script>