@extends('layouts.app')
@section('content')
    <section class="content">
        <div class="container-fluid">
            <header>
                <div class="px-sm-4">
                        <div class="row mt-2 mt-sm-3">
                            <div class="col-md-7">
                                <div class="top-head">
                                    <h1>Cow Breeds</h1>
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb">
                                            <li class="breadcrumb-item"><a href="/home">Settings</a></li>
                                            <li class="breadcrumb-item"><a href="/cow-breeds">Cow Breeds</a></li>
                                            <li class="breadcrumb-item active" aria-current="page">View</li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                            <div class="col-md-5 text-sm-right text-left">
                                <a href="{{ url('cow-breeds') }}" type="button" class="btn cancel-btn mr-2">Cancel</a>
                                {{-- <button type="button" class="btn save-btn" role="button" data-request="ajax-submit"
                                    data-target="[role=post-data]">Submit</button> --}}
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-md-12">
                                <div class="user-editbox">
                                    <div class="row">
                                        <div class="col-md-6 col-7">
                                            <div class="inner-head">
                                                <p>Add/edit details</p>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-5">
                                            <div class="toogleSwitch float-right">
                                                @if ($cowBreed->status == 'active')
                                                <span class="badge active-badge">Active</span>
                                                @else
                                                <span class="badge inactive-badge">Inactive</span>
                                            @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="border-bottom pt-2"></div>

                                    <div class="row mt-3">
                                        <div class="col-md-4">
                                            <div class="edit-userprofile">
                                                <a href="{{ $cowBreed->image ? $cowBreed->image : 'javascript:void(0)' }}"
                                                    @if ($cowBreed->image) target="_blank" @endif
                                                    id="preview_image_link"><img
                                                        src="{{ $cowBreed->image ? $cowBreed->image : '/assets/img/cow-img.png' }}"
                                                        id="preview_image"></a>
                                            </div>


                                            {{-- <div class="d-flex justify-content-center">
                                                <div class="upload-btn-wrapper">
                                                    <button class="uploadBtn">
                                                        Tap to change <span>photo</span>
                                                    </button>
                                                    <input type="file" accept=".png,.jpg,.jpeg" name="image" id="image"
                                                        onchange="renderImage(this,'preview_image','preview_image_link')">
                                                </div>
                                            </div> --}}

                                            {{-- <div class="d-flex align-items-center justify-content-center">
                                                <span class="size-img">Max size 10 MB</span>
                                            </div> --}}

                                        </div>
                                        <div class="col-md-8">

                                            <div class="form-group">
                                                <label class="edit-label">Cow Breed <span class="mendatory-field text-danger">*</span> </label>
                                                <input type="text" name="name" value="{{ $cowBreed->name }}" class="form-control edit-input"
                                                    placeholder="Enter Breed Name" onkeydown="return false;" >
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="edit-label">Price /Cow <span class="mendatory-field text-danger">*</span> </label>
                                                    <div class="input-group mb-3">
                                                        <input type="text" name="price" value="{{ $cowBreed->price }}" class="form-control edit-input"
                                                            placeholder="Price /Cow" onkeydown="return false;">
                                                        <div class="input-group-append new-daysbox">
                                                            <span class="input-group-text" id="basic-addon2">UGX</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="edit-label">Ideal Yield /day <span class="mendatory-field text-danger">*</span> </label>
                                                    <div class="input-group mb-3">
                                                        <input type="text" name="yield" value="{{ $cowBreed->yield }}" class="form-control edit-input"
                                                            placeholder="Enter Ideal Yield /day" onkeydown="return false;">
                                                        <div class="input-group-append new-daysbox">
                                                            <span class="input-group-text" id="basic-addon2">Ltr.</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="edit-label">General Info</label>
                                                <textarea class="form-control edit-input" name="address" rows="7" placeholder="Write..." onkeydown="return false;">{{ @$cowBreed->address }}</textarea>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                </div>
            </header>

        </div>
    </section>
@endsection
@section('scripts')
    <script type="text/javascript">

        function activeStatus() {
            var status = 'active';
            $('#status').val(status);
            document.getElementById('staus').setAttribute('onclick', 'inactiveStaus()');
        }

        function inactiveStaus() {
            var status = 'inactive';
            $('#status').val(status);
            document.getElementById('staus').setAttribute('onclick', 'activeStatus()');
        }

    </script>
@endsection