@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>Edit package</h5>
            <form class="form-horizontal" action="{{ route('all-packages.update', ['id' => $package->id]) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row">

                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Package name</label>
                            <input type="text" placeholder="Pacakage name" name="name_en" id="name_en" value="{{ $package->name_en }}" class="form-control @error('name_en') is-invalid @enderror" />
                            @error('name_en')
                                <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="name_ar" value="{{ $package->name_ar }}" id="name_ar" class="form-control"/>
                        </div>
                    </div>

                    {{-- <div class="col-md-12">
                        <div class="form-group">
                            <label>Price</label>
                            <input type="number" placeholder="Pacakage price" name="price" value="{{ $package->price }}"  id="price" class="form-control @error('price') is-invalid @enderror" />
                            @error('price')
                                <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>
                    </div> --}}

                    {{-- <div class="col-md-12">
                        <div class="form-group">
                            <label>Discount Price</label>
                            <input type="number" placeholder="Discount Price" name="discount_price" value="{{ $package->discount_price }}"  id="discount_price" class="form-control @error('discount_price') is-invalid @enderror" />
                            @error('discount_price')
                                <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </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="{{ $package->color }}">
                        </div>
                    </div> --}}

                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Status</label>
                            <div class="form-check form-switch h6" style="float: right">
                                <input type="checkbox" onchange="updateTypeActivation(this, {{ $package->id }})" class="form-check-input" name="status" id="status" >
                                <label class="form-check-label" for="status"></label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Service</label>
                            <select class="form-control" name="service_id" id="service_id">
                                @foreach($services as $key=> $service)
                                    <option value="{{ $service->id }}" {{  ($service->id == $package->service_id) ? 'selected' : '' }}>{{ $service->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

{{--                    <div class="col-md-12">--}}
{{--                        <div class="form-group">--}}
{{--                            <label>Number Of Washes</label>--}}
{{--                            <input type="number" placeholder="Number Of Washes" name="number_of_washes" id="number_of_washes" value="{{ $package->number_of_washes }}" class="form-control @error('number_of_washes') is-invalid @enderror" />--}}
{{--                            @error('number_of_washes')--}}
{{--                                <p class="error-validation">{{ $message }}</p>--}}
{{--                            @enderror--}}
{{--                        </div>--}}
{{--                    </div>--}}

                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Number Of Exterior Washes</label>
                            <input type="number" placeholder="Number Of Exterior Washes" name="number_of_exterior_washes" id="number_of_exterior_washes" value="{{ $package->number_of_exterior_washes }}" class="form-control @error('number_of_exterior_washes') is-invalid @enderror" />
                            @error('number_of_exterior_washes')
                                <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Number of Interior Washes</label>
                            <input type="number" placeholder="Number Of Interior Washes" name="number_of_interior_washes" id="number_of_interior_washes" value="{{ $package->number_of_interior_washes }}" class="form-control @error('number_of_interior_washes') is-invalid @enderror" />
                            @error('number_of_interior_washes')
                                <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Sedan Price</label>
                            <input type="number" placeholder="Sedan Price" name="sedan_price" value="{{ $package->sedan_price }}" id="sedan_price" class="form-control @error('sedan_price') is-invalid @enderror" />
                            @error('sedan_price')
                                <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Suv Price</label>
                            <input type="number" placeholder="Suv Price" name="suv_price" value="{{ $package->suv_price }}" id="suv_price" class="form-control @error('suv_price') is-invalid @enderror" />
                            @error('suv_price')
                                <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Note</label>
                            <input type="text" placeholder="Note" name="notes_en" id="notes_en" value="{{ $package->notes }}" class="form-control" />
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Icon</label>

                            <div class="icon-upload">
                                @if($package->icon)
                                    <label for="icon">
                                        <img id="output" src="{{ $package->icon }}" width="80px" height="80px"/>
                                    </label>
                                @else
                                    <label for="icon">
                                        <img id="output" src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png" width="80px" height="80px"/>
                                    </label>
                                @endif
                                <input type="file" onchange="loadFile(event)" placeholder="icon" name="icon" id="icon" class="form-control  @error('icon') is-invalid @enderror"  accept="image/png, image/gif, image/jpeg" style="display: none;"/>
                            </div>

                        </div>
                    </div>

                    <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 type="text/javascript">

    function updateTypeActivation(el, id){
        if($(el).is(':checked')){
            var status = 1;
        } else {
            var status = 0;
        }

        $.post('{{ route('all-packages.statusUpdate') }}', {_token:'{{ csrf_token() }}', id:id, status:status}, function(data){
            if(data == 1){
                $.notify('Status updated successfully', 'success');
                setTimeout(function(){
                    window.location.reload(1);
                }, 5000);
            }
            else{
                $.notify('Something went wrong', 'danger');
            }
        });
    }

    function loadFile(event) {
        var image = document.getElementById('output');
        image.src = URL.createObjectURL(event.target.files[0]);
    };
</script>