@extends('admin/layouts/main')

@section('content')
<div id="page-content">
    <div class="content-header content-header-media">
        <div class="header-section">
            <div class="row">
                <!-- Main Title (hidden on small devices for the statistics to fit) -->
                <div class="col-md-4 col-lg-6 hidden-xs hidden-sm">
                    <h1><i class="fa fa-list"></i>&nbsp;&nbsp;&nbsp;{{$category_detail->name}}<br><small>&nbsp;&nbsp;&nbsp;Edit {{$category_detail->name}} category here!</small></h1>
                </div>
                <!-- END Main Title -->

                <!-- Top Stats -->
                
                <!-- END Top Stats -->
            </div>
        </div>
        <!-- For best results use an image with a resolution of 2560x248 pixels (You can also use a blurred image with ratio 10:1 - eg: 1000x100 pixels - it will adjust and look great!) -->
        <img src="{{URL::to('/')}}/admin/img/placeholders/headers/dash_bg.png" alt="header image" class="animation-pulseSlow">
    </div> 
    <ul class="breadcrumb breadcrumb-top">
        <li><a href="{{url('admin/dashboard')}}">Dashboard</a></li>
        <li><a href = "{{url('admin/categories')}}">Categories</a></li>
        <li><a href="javascript:void(0)">Edit {{$category_detail->name}} category</a></li>
    </ul>    
    <div class="header-section det">
        <div class = "row">            
            <h1>
                {{$category_detail->name}}<br><small> Edit {{$category_detail->name}} category</small>                
            </h1> 
        </div>        
    </div>
    <div class="row">
        <div class="col-md-12">
            <!-- Basic Form Elements Block -->
            <div class="block">
                <!-- Basic Form Elements Title -->
                <div class="block-title">
                    <h2><strong>Edit</strong> {{$category_detail->name}}</h2>
                </div>
                <!-- END Form Elements Title -->

                <!-- Basic Form Elements Content -->
                <form action="{{URL::to('/')}}/admin/edit-category/{{$category_detail->id}}" method="post" enctype="multipart/form-data" class="form-horizontal form-bordered">
                {{ method_field('PUT') }}
                    {{ csrf_field() }}
                    <div class="form-group">
                        <label class="col-md-3 control-label">Name</label>
                        <div class="col-md-9">
                             <input type="text" id="cat-name" name="name" class="form-control" placeholder="{{$category_detail->name}}" value="{{$category_detail->name}}">
                        </div>
                    </div>                    
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="example-select">Select Type</label>
                        <div class="col-md-9">
                            <select id="example-select" name="type" class="form-control" size="1">
                                <option style="display:none" value="{{$category_detail->type}}">@if($category_detail->type == 1)
                                                                Food
                                                            @elseif($category_detail->type == 2)
                                                                Supplies
                                                            @elseif($category_detail->type == 3)
                                                                Community & Services
                                                            @endif
                                </option>
                                <option value="1">Food</option>
                                <option value="2">Supplies</option>
                                <option value="3">Community & Services</option>
                            </select>
                        </div>
                    </div>                    
                    <div class="form-group">
                        <label class="col-md-3 control-label">Icon Image</label>
                        <div class="col-sm-3" id="icon-img1">
                            <img id="blah1" src="{{$category_detail->icon_image}}" width="110px" alt="img">
                        </div>
                        <div class="col-md-6">
                            <input type="file" id="cat-icon-img" name="icon_image" class="imgImp1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Image</label>
                        <div class="col-sm-3" id="image1">
                            <img id="blah2" src="{{$category_detail->image}}" width="110px" alt="img">
                        </div>
                        <div class="col-md-6">
                            <input type="file" id="cat-img" name="image" class="imgImp2">
                        </div>
                    </div>
                    <div class="form-group form-actions">
                        <div class="col-md-9 col-md-offset-3">
                            <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-angle-right"></i> Submit</button>
                            <button type="reset" class="btn btn-sm btn-warning"><i class="fa fa-repeat"></i> Reset</button>
                        </div>
                    </div>
                </form>
                <!-- END Basic Form Elements Content -->
            </div>
            <!-- END Basic Form Elements Block -->
        </div>
    </div>       
</div>

<script>
    function readURL(input) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#icon-img1').removeClass('hide');
                $('#blah1').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $(".imgImp1").change(function () {
        readURL(this);
    });

    function readURL2(input) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#image1').removeClass('hide');
                $('#blah2').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $(".imgImp2").change(function () {
        readURL2(this);
    });
</script>

@stop