@extends('backpack::layout')

@section('header')
    <section class="content-header">
      <h1>
        Drugs
      </h1>
      <ol class="breadcrumb">
        <li><a href="{{ url('administrator') }}">{{ config('app.name') }}</a></li>
        <li class="active">Drugs</li>
      </ol>
    </section>
@endsection


@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="box box-default">
                <div class="box-header with-border">
                    <button type="button" class="pull-right btn btn-primary btn-md" data-toggle="modal" data-target="#modal-default">
                        Add New Drug
                    </button>
                </div>

                <div class="box-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <th>#</th>
                                <th>Image</th>
                                <th>Drug Name</th>
                                <th>Quantity</th>
                                <th>Price (NGN)</th>
                                <th>Company</th>
                                <th>Category</th>
                                <th>Brand</th>
                                <th></th>
                            </thead>
                            <tbody>
                                @forelse($drugs as $drug)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td><img src="{{ asset('storage/'.$drug->picture_path) }}" width="50px" height="50px" alt="{{ $drug->name }}"></td>
                                        <td>{{ $drug->name }}</td>
                                        <td>{{ $drug->quantity }}</td>
                                        <td>{{ $drug->price }}</td>
                                        <td>{{ $drug->company->company_name}}</td>
                                        <td>{{ $drug->category->name }}</td>
                                        <td>{{ $drug->brand }}</td>
                                        <td>
                                            <a href="{{ route('editDrug', ['id'=>$drug->id]) }}" class="btn btn-info">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            <a href="{{ route('deleteDrug', ['id'=>$drug->id]) }}" class="btn btn-danger delete">
                                                <i class="fa fa-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    No drugs added yet.
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Add New Drug</h4>
                </div>
                <div class="modal-body">
                    <form action="{{ route('addNewDrug') }}" method="post" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Drug Name <span class="text-danger">*</span></label>
                                    <input type="text" name="drug_name" placeholder="Drug Name" class="form-control">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Drug Quantity <span class="text-danger">*</span></label>
                                    <input type="number" name="drug_quantity" min="1" placeholder="Drug Quantity" class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Drug Price <span class="text-danger">*</span></label>
                                    <input type="number" name="drug_price" min="1" placeholder="Drug Price" class="form-control">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label>Image <span class="text-danger">*</span></label>
                                <div class="form-group">
                                    <label class="btn btn-primary btn-md" style="padding-left: 20px; padding-right: 20px">
                                        <i class="fa fa-image"></i> Choose Drug Image
                                        <input type="file" name="drug_image" accept="image/*" style="display: none;">
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Category <span class="text-danger">*</span></label>
                                    <select name="drug_category" class="form-control">
                                        <option value="">Choose Category</option>
                                        @forelse ($categories as $category)
                                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                                        @empty
                                            {{--  --}}
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Pharmacy <span class="text-danger">*</span></label>
                                    <select name="pharmacy" class="form-control">
                                        <option value="">Choose Pharmacy</option>
                                        @forelse ($pharmacies as $pharmacy)
                                            <option value="{{ $pharmacy->id }}">{{ $pharmacy->company_name }}</option>
                                        @empty
                                            {{--  --}}
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>Brand <span class="text-danger">*</span></label>
                                    <input type="text" name="drug_brand" placeholder="Drug Brand" class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Drug Description <span class="text-danger">*</span></label>
                            <textarea name="drug_description" rows="10" placeholder="Drug Description" class="form-control"></textarea>
                        </div>
                </div>
                <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save Drug</button>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <script>
        $(document).ready(function() {
            $('#drugs').addClass('active');

            $('.table').DataTable({
                responsive: true,
                pageLength: 50
            });

            $('a.delete').click(function() {
                var response = confirm('Are you sure you want to delete this drug from the repository?');
                if (response === true) {
                    return true;
                } else {
                    return false;
                }
            });

            tinymce.init({
                selector: 'textarea',
                plugins : 'advlist autolink link image wordcount lists charmap print preview'
            });
        });
    </script>
@endsection