@extends('layouts.master')

@section('title', 'Edit Container')

@php
    if($container->wastes_qty) {
        $wastes_qty = $container->wastes_qty;
        $wastes_qty_data = unserialize($wastes_qty);
    } else {
        $wastes_qty_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.container.update',$container->id) }}" enctype="multipart/form-data">
        @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('description')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('image')" class="mt-2 alert-danger" />

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

                            <!--div class="form-group">
                                <label for="ContainerQuantity">Quantity</label>
                                <x-text-input id="ContainerQuantity" class="form-control block mt-1 w-full" type="text" name="quantity" value="{{ $container->quantity }}" autofocus autocomplete="name" placeholder="Enter Quanity" />
                            </div>

                            <div class="form-group">
                                <label for="ContainerStockQty">Number of Avaiable</label>
                                <x-text-input id="ContainerStockQty" class="form-control block mt-1 w-full" type="text" name="stock_qty" value="{{ $container->stock_qty }}" autofocus autocomplete="name" placeholder="Enter Number of Container available" />
                            </div-->

                            <div class="form-group">
                                <label for="containerDescription">Description</label>
                                <textarea id="containerDescription" class="form-control block mt-1 w-full" type="text" name="description" required placeholder="Enter Description" />{{ $container->description }}</textarea>
                            </div>

                            <div class="form-group">
                                <label for="containerImage">Image</label>
                                <input id="containerImage" class="form-control mt-1 w-full" type="file" name="image" placeholder="Enter Image" /></textarea>
                                <img class="mt-1" src="{{ asset('storage/' . $container->image) }}" alt="Uploaded Image" width="100">
                            </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" {{ $container->status == 'enable' ? 'checked' : '' }} >
                            </div>

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

                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">Update Size</button>
                        </div>
                </div>
                <!-- /.card -->
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <label>Waste Types</label>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            @if($wastes)
                            <div>
                            @foreach($wastes as $waste)

                            <div class="row">
                                <label class="col-md-12 d-block">{{ $waste->name }} : </label>
                                <div class="form-group col-md-6">
                                    <div class="input-group block">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                Total Qty
                                            </span>
                                        </div>
                                        <input type="number" min="1" class="form-control block" name="wastes_qty[{{$waste->id}}][total]" value="{{ $wastes_qty_data[$waste->id]['total'] ?: '' }}" />
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <div class="input-group block">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                Available Qty
                                            </span>
                                        </div>
                                        <input type="number" min="1" class="form-control block" name="wastes_qty[{{$waste->id}}][avl]" value="{{ $wastes_qty_data[$waste->id]['avl'] ?: '' }}" />
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        </form>
      </div>
    </section>
    <!-- /.content -->
@endsection
@section('pageJS')
<script>
    $(function () {
        $("input[data-bootstrap-switch]").each(function(){
        $(this).bootstrapSwitch('state', $(this).prop('checked'));
        })
    });
</script>
@endsection