@extends('layouts.dashboard')
@section('pagehead', 'Billing Details')
@section('bredcrumb-item-link',url('/home/billing-master/basic-details'))
@section('bredcrumb-item','All Details')

@section('content')
<section class="section dashboard">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    @include('layouts.notification')
                </div>
                <p id="address"></p>
                <div class="card-body">
                    <form enctype="multipart/form-data" action="{{ url('/home/billing-master/basic-details/submit') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label class="mb-2 mt-2">Categories</label>
                                <select name="category" id="category" class="form-control">
                                    @foreach($categories as $key => $category)
                                        <option value="{{trim(strtolower($category))}}">{{ strtoupper($category) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-12 content_div">
                                <label class="mb-2 mt-2">Content</label>
                                <textarea name="content" class="form-control" cols="30" rows="10"></textarea>
                            </div>
                            <div class="form-group col-md-12 image_div">
                                <label class="mb-2 mt-2">Image</label>
                                <input type="file" name="logo_image" class="form-control">
                            </div>
                        </div>
                        <div class="form-group mt-3">
                            <input type="submit" value="Add Details" class="btn btn-primary btn-xs">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('scripts')
<script type="text/javascript">
    $(function() {
        // alert($('#category').value());
        $(".image_div").hide();
        $(".content_div").show();
        $('#category').change(function() {
            //Use $option (with the "$") to see that the variable is a jQuery object
            var $option = $(this).find('option:selected');
            //Added with the EDIT
            var value = $option.val();//to get content of "value" attrib
            var text = $option.text();//to get <option>Text</option> content
            if(value == 'logo' || value == 'stamping' || value == 'signature'){
                $(".image_div").show();
                $(".content_div").hide();
                $(".content").val();
            }
        });
    });
</script>
@endsection