@extends('layouts.app')
@section('content')
    <section class="content">
        <div class="container-fluid">

            <div class="px-sm-4">
                <header>
                    <div class="row mt-2 mt-sm-3">
                        <div class="col-md-7 col-10">
                            <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 active" aria-current="page">Cow Breeds</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                        <div class="col-md-5 col-2 text-right">
                            <div class="d-flex justify-content-end">

                                <div class="top-search-bar d-sm-block d-none mr-3">
                                    {{-- <form class="search-form" role="search">
                                        <div class="form-group pull-right" id="searchnew">
                                            <input type="text" class="form-control" placeholder="Search by...">
                                            <button type="submit" class="form-control form-control-submit">Submit</button>
                                            <span class="search-label"><img src="{{ asset('assets/img/search.svg') }}"
                                                    alt="/"></span>
                                        </div>
                                    </form> --}}
                                    <form>
                                        <input type="text" name="search" placeholder="Search by ..." id="search"
                                            class="form-control" value="{{ $search }}">
                                    </form>
                                </div>

                                <a href="{{ url('cow-breeds/create') }}"><button type="button" class="plus-btn"><img
                                            src="{{ asset('assets/img/plus-white.svg') }}" alt=""></button></a>
                            </div>
                        </div>
                    </div>
                </header>



                <div class="row mt-2">
                    <div class="col-md-12">
                        <div class="card table-card p-2">
                            <div class="table-responsive">
                                <table class="table dairy-table mb-0">
                                    <thead>
                                        <tr>
                                            <th colspan="3" style="text-align: center;">COW BREED</th>
                                            <th>IDEAL YIELD /DAY</th>
                                            <th colspan="3">PRICE /COW</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($cowBreeds as $item)
                                            <tr>
                                                <td>
                                                    @if($item->status == 'active')
                                                    <p class="active-notgreen"></p>
                                                    @else
                                                    <p class="active-notgreen  active-dotgray"></p>
                                                    @endif
                                                </td>
                                                <td width="70px">
                                                    <img src="{{ isset($item->image) ?$item->image : '' }}"
                                                    onerror="this.src='/assets/img/cow-img.png'"
                                                    alt="{{ isset($item->image) ? $item->image : '' }}" width="50px" height="50px">
                                                </td>

                                                <td>{{ $item->name }}</td>
                                                <td>{{ $item->yield }}</td>
                                                <td>{{ $item->price }}</td>
                                                <td width="90px">
                                                    <a href="cow-breeds/view/{{ base64_encode($item->id) }}">
                                                        <span class="badge eye-box mr-1"><img
                                                                src="{{ asset('assets/img/eye.svg') }}"
                                                                alt=""></span>
                                                    </a>
                                                    <a href="cow-breeds/edit/{{ base64_encode($item->id) }}"><span class="badge edit-box"><img src="{{ asset('assets/img/edit.svg') }}"
                                                        alt=""></span></a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                    @if (count($cowBreeds) == 0)
                                        <div>
                                            <center>No record(s) found!</center>
                                        </div>
                                    @endif
                            </div>
                        </div>
                    </div>
                </div>

                {{ $cowBreeds->appends(request()->input())->links('partials.pagination') }}

            </div>
        </div>
    </section>
@endsection
@section('scripts')
    <script>
         $("#search").change(function() {
            this.form.submit();
        });

    </script>
@endsection