@extends('layouts.master')

@section('title', 'Edit Waste Type')

@php
    if($waste->daterange_prices) {
        $daterange_prices = $waste->daterange_prices;
        $daterange_prices_data = unserialize($daterange_prices);
    } else {
        $daterange_prices_data = array();
    }

    if($waste->container_prices) {
        $container_prices = $waste->container_prices;
        $container_prices_data = unserialize($container_prices);
    } else {
        $container_prices_data = array();
    }
@endphp

@section('content')
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">

            @if(Session::has('success'))
                <div class="alert alert-success">
                    {{ Session::get('success') }}
                </div>
            @endif
            <form method="post" action="{{ route('admin.waste.update',$waste->id) }}">
            @csrf
                <div class="row">
                    <div class="col-md-6">
                        <div class="card card-primary">
                            <x-input-error :messages="$errors->get('name')" class="mt-2 alert-danger" />
                            <x-input-error :messages="$errors->get('can_put_in')" class="mt-2 alert-danger" />
                            <x-input-error :messages="$errors->get('cant_put_in')" class="mt-2 alert-danger" />

                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="wasteName">Waste Type Name</label>
                                        <x-text-input id="wasteName" class="form-control block mt-1 w-full" type="text" name="name" value="{{ $waste->name }}" autofocus autocomplete="name" placeholder="Enter Name" />
                                    </div>

                                    <div class="form-group">
                                        <label for="waste_can_put_in">What you CAN put in</label>
                                        <textarea id="waste_can_put_in" class="form-control block mt-1 w-full" type="text" name="can_put_in" required placeholder="Enter What you CAN put in" rows="3" />{{ $waste->can_put_in }}</textarea>
                                    </div>

                                    <div class="form-group">
                                        <label for="waste_cant_put_in">What you CAN'T put in</label>
                                        <textarea id="waste_cant_put_in" class="form-control block mt-1 w-full" type="text" name="cant_put_in" required placeholder="Enter What you CAN't put in" rows="3" />{{ $waste->cant_put_in }}</textarea>
                                    </div>

                                    <div class="row">
                                        <label class="col-md-12 d-block">Base Price</label>
                                        <div class="form-group col-md-6">
                                            <div class="input-group block">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        $
                                                    </span>
                                                </div>
                                                <input type="text" class="form-control block" name="base_price_7days" value="{{ $waste->base_price_7days }}" required />
                                                <div class="input-group-append">
                                                    <span class="input-group-text">
                                                    {{$waste->extra_hireage_days}} Days
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <div class="input-group block">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        $
                                                    </span>
                                                </div>
                                                <input type="text" class="form-control block" name="base_price_1day" value="{{ $waste->base_price_1day }}" required />
                                                <div class="input-group-append">
                                                    <span class="input-group-text">
                                                        1 Day
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="enable-disable" class="d-block">Enable/Disable</label>
                                        <input type="checkbox" name="status" data-bootstrap-switch data-off-color="danger" data-on-color="success" value="enable" {{ $waste->status == 'enable' ? 'checked' : '' }} >
                                    </div>

                                </div>
                                <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>

                    <div class="col-md-6">
                        <div class="card card-primary">
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="addLocationCity">Container Prices</label>
                                    @if($containers)
                                    <div>
                                    @foreach($containers as $container)

                                    <div class="form-group">
                                        <label>{{ $container->name }} : </label>
                                        <div class="input-group block">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    $
                                                </span>
                                            </div>
                                            <input type="text" class="form-control block daterange_price" name="container[{{$container->id}}]" value="{{ $container_prices_data[$container->id] ?: '' }}" required autofocus autocomplete="name" placeholder="Enter Price" />
                                        </div>
                                    </div>
                                    @endforeach
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="card card-primary">
                            <div class="card-body">

                                <div class="form-group">
                                    <label>Extra Hireage</label>
                                    <div class="d-flex align-center">
                                        <span class="mx-1">$ </span> <x-text-input class="form-control block mt-1" type="text" name="extra_hireage_amount" value="{{ $waste->extra_hireage_amount }}" required style="width:100px" /> <span class="mx-1"> extra hire per day after </span><x-text-input class="form-control block mt-1" type="text" name="extra_hireage_days" value="{{ $waste->extra_hireage_days }}" required style="width:100px" /> <span class="mx-1">days</span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label>Excess Weight</label>
                                    <div class="d-flex align-center">
                                        <span class="mx-1">$ </span> <x-text-input class="form-control block mt-1" type="text" name="excess_weight_amount" value="{{ $waste->excess_weight_amount }}" required style="width:100px" /> <span class="mx-1"> per tonne additional customer charge for weights exceeding allowance of 150kg per cubic metre. </span>
                                    </div>
                                </div>

                                <hr class="my-4" />

                                @if($daterange_prices_data)

                                @foreach($daterange_prices_data as $index => $data)

                                @if($index === 0)
                                <div class="dateranger-repeater">
                                @elseif($index === 1)
                                <div class="more-dates">
                                @endif

                                    <div class="row">
                                        <div class="form-group col-md-4">
                                            <label>Select Container Size's</label>
                                            <select name="daterange_prices[{{ $index }}][sizes][]" class="form-control select2 daterange_sizes" multiple="multiple" style="width: 100%;" data-placeholder="Select Container Size">
                                                @if($containers)
                                                @foreach($containers as $container)
                                                    @php
                                                        $selected = '';
                                                            if(!empty($data['sizes'])) {
                                                            if(is_array($data['sizes']) && in_array($container->id, $data['sizes'])) {
                                                                $selected = 'selected="selected"';
                                                            }
                                                            else if($container->id == $data['sizes']) {
                                                                $selected = 'selected="selected"';
                                                            }
                                                        }
                                                    @endphp

                                                <option value="{{$container->id}}" {{ $selected }} >{{ $container->name }}</option>

                                                @endforeach
                                                @else
                                                <option value="all" selected="selected">All</option>
                                                @endif
                                            </select>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label>Dates Between</label>
                                            <div class="input-group block">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="far fa-calendar-alt"></i>
                                                    </span>
                                                </div>
                                                <input type="text" name="daterange_prices[{{ $index }}][dates]" class="form-control float-right daterange_dates" id="daterangepicker" value="{{ $data['dates'] }}">
                                            </div>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label>Price($)</label>
                                            <div class="input-group block">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        $
                                                    </span>
                                                </div>
                                                <input type="text" class="form-control block daterange_price" name="daterange_prices[{{ $index }}][price]" value="{{ $data['price'] }}" required />
                                            </div>
                                        </div>

                                        <div class="form-group col-md-2 mt-4">
                                            <i class="fa fa-plus text-lg text-success add-repeater-icon mr-4"></i>
                                            @if($index !== 0)
                                            <i class='fa fa-times text-lg text-danger remove-repeater-icon'></i>
                                            @endif
                                        </div>
                                    </div>
                                @if($index === 0 || ($index === count($daterange_prices_data)-1))
                                </div>
                                @endif

                                @endforeach
                                    @if(count($daterange_prices_data) === 1)
                                    <div class="more-dates"></div>
                                    @endif
                                @else

                                <div class="dateranger-repeater">
                                    <div class="row">
                                        <div class="form-group col-md-4">
                                            <label>Select Container Size's</label>
                                            <select name="daterange_prices[0][sizes][]" class="form-control select2 daterange_sizes" multiple="multiple" style="width: 100%;" data-placeholder="Select Container Size">
                                                <option value="all">All</option>
                                                @if($containers)
                                                @foreach($containers as $container)
                                                <option value="{{$container->id}}">{{ $container->name }}</option>
                                                @endforeach
                                                @endif
                                            </select>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Dates Between</label>
                                            <div class="input-group block">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="far fa-calendar-alt"></i>
                                                    </span>
                                                </div>
                                                <input type="text" name="daterange_prices[0][dates]" class="form-control float-right daterange_dates" id="daterangepicker" :value="old('daterange_dates')">
                                            </div>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label>Price($)</label>
                                            <div class="input-group block">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        $
                                                    </span>
                                                </div>
                                                <input type="text" class="form-control block daterange_price" name="daterange_prices[0][price]" :value="old('daterange_price')" />
                                            </div>
                                        </div>

                                        <div class="form-group col-md-2 mt-4"><i class="fa fa-plus text-lg text-success add-repeater-icon mr-4"></i></div>
                                    </div>
                                </div>
                                <div class="more-dates"></div>

                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="card-footer text-center">
                            <button type="submit" class="btn btn-success btn-lg">Update Waste</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <!-- /.content -->
@endsection
@section('pageJS')
<script>
    $(function () {
        $("input[data-bootstrap-switch]").each(function(){
            $(this).bootstrapSwitch('state', $(this).prop('checked'));
        });

        $('.select2').select2();

        $('#daterangepicker').daterangepicker();
        $('.daterange_dates').daterangepicker();

        $(document).on('click',".add-repeater-icon",function(){
            console.log("Sdfsdf");
            var parent = $(".dateranger-repeater").html();
            var appendChild = $(".more-dates");
            appendChild.append(parent);
            $(".more-dates .row:last").find('input').val('');
            $(".more-dates .row:last").find('select').val('');

            index_repeater_inputs();

            $(".more-dates .row").each(function() {
                var removeIcon = "<i class='fa fa-times text-lg text-danger remove-repeater-icon'></i>";
                if(!$(this).find(".col-md-2 .remove-repeater-icon").length) {
                    $(this).find(".col-md-2").append(removeIcon);
                }
            });

            $('.select2').select2();

            $(".more-dates .row:last").addClass("new-row");
            $(".more-dates .new-row .col-md-4 .select2:last-child").remove();
        });

        $(document).on('click',".remove-repeater-icon",function(){
            $(this).parent(".col-md-2").parent(".row").remove();
            index_repeater_inputs();
        });

        function index_repeater_inputs() {
            console.log("index_repeater_inputs");
            $(".more-dates .row").each(function(index) {
                $(this).find('.daterange_sizes').attr('name', 'daterange_prices[' + (index + 1) + '][sizes][]');
                $(this).find('.daterange_dates').attr('name', 'daterange_prices[' + (index + 1) + '][dates]');
                $(this).find('.daterange_price').attr('name', 'daterange_prices[' + (index + 1) + '][price]');
            });
            $('.daterange_dates').daterangepicker();
        }
    });
</script>
@endsection

@section('pageCSS')
<style>
.dateranger-repeater .row, .more-dates .row {
	align-items: center;
}
</style>
@endsection