@extends('layout.app')
@section('title')
    Stores
@endsection
@push('css')
  <link rel="stylesheet" href="{{asset('plugins/select2/css/select2.min.css')}}">
  <style>
    .select2-selection__rendered {
        color: #fff !important;
    }

    .select2-selection__choice{
        color: #000 !important;
    }

  </style>
@endpush
@section('content')

<section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6 ">
          <h1>Stores</h1>

          
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active">Simple Tables</li>
          </ol>
        </div>
      </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">

       <div class="row">
        <div class="col-6">
          <div class="card mx-1">
            <div class="card-header">
              Import purchased list
            </div>
            <div class="card-body">
              <form action="{{route('store.product.import')}}" method="POST" enctype="multipart/form-data" class="d-flex ml-2">
                @csrf
                <input required type="file" name="file" class="form-control">
                <button class="btn btn-success" type="submit">Import</button>
              </form>
            </div>
          </div>
        </div>
        
        <div class="col-6">
          <div class="card mx-1">
            <div class="card-header">
              Import store list
            </div>
            <div class="card-body">
              <form action="{{route('store.import')}}" method="POST" enctype="multipart/form-data" class="d-flex ml-2">
                @csrf
                <input required type="file" name="file" class="form-control">
                <button class="btn btn-success" type="submit">Import</button>
              </form>
            </div>
          </div>
        </div>
       </div>

        <div class="card">
            <div class="card-header">
              <h3 class="card-title w-100 row justify-content-between align-items-center">
             
                <div class="d-flex">
                  <a href="{{route('store.create')}}" class="btn btn-primary">
                      <i class="fa fa-plus"></i>
                      Add New Store
                  </a>
                  <form action="{{route('store.export')}}" method="POST">
                      @csrf
                      <button class="btn btn-success ml-2" type="submit">Export</button>
                  </form>
                </div>

                

                  <form class="d-flex align-items-center" action="{{route('store.index')}}" method="GET">
                    <div class="col-6">
                        <div class="form-group">
                            <select name="category[]" class="form-control select2" multiple>
                                @foreach(App\StoreCategory::all() as $category)
                                    <option
                                    value="{{$category->id}}"
                                    @if(isset($_GET['category']) && in_array($category->id,$_GET['category']))
                                        selected
                                    @endif
                                    >{{$category->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                      <input value="{{$_GET['keyword'] ?? null}}" placeholder="Enter your keyword" class="form-control" name="keyword">
                    </div>
                    <div class="form-group">
                      <button class="btn btn-primary">Search</button>
                    </div>
                  </form>
              </h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body p-0">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Image</th>
                    <th>Name</th>
                    <th>Group</th>
                    <th>Code</th>
                    <th>Contact</th>
                    <th>Address</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>

                    @if ($stores->count() > 0)
                        @foreach ($stores as $key=>$store)
                            <tr>
                                <td>{{$key+1}}</td>
                                <td>
                                  <img src="{{asset($store->image)}}" height="100" alt="">
                                </td>
                                <td>{{$store->name}}</td>
                                <td>{{$store->group->name ?? null}}</td>
                                <td>{{$store->code}}</td>
                                <td>{{$store->contact}}</td>
                                <td style="max-width:20vw;">{{$store->address}}</td>
                                <td>

                                  <div class="btn-group">
                                    <div class="btn-group">
                                      <button type="button" class="btn btn-primary dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">
                                        More
                                      </button>
                                      <div class="dropdown-menu dropdown-menu-right" style="">
                                        <a class="dropdown-item text-success" href="{{route('store.edit',$store->id)}}">
                                          <i class="fa fa-edit"></i>
                                          Edit
                                        </a>
                                        <a href="{{route('store.product.create',$store->id)}}" type="button" class="text-info dropdown-item">
                                          <i class="fa fa-plus"></i>
                                          Add products
                                        </a>
                                        <a href="{{route('store.product.index',$store->id)}}" type="button" class="text-primary dropdown-item">
                                          <i class="fa fa-eye"></i>
                                          View purchased list
                                        </a>
                                        <div class="dropdown-divider"></div>
                                        <a 
                                          onclick="if(confirm('Are you sure you want to delete this?')){
                                              event.preventDefault();
                                              document.getElementById('storeDelete-{{$store->id}}').submit();
                                            }"
                                        type="button" class="dropdown-item text-danger">
                                          <i class="fa fa-trash"></i>
                                          Delete
                                        </a>
                                      </div>
                                      </div>
                                   </div>
                                    

                                    

                                  <form id="storeDelete-{{$store->id}}" action="{{route('store.destroy',$store->id)}}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                  </form>
                                   
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <p class="text-center">No data yet!</p>
                    @endif
                </tbody>
              </table>
            </div>
            <!-- /.card-body -->
            <div class="card-footer">
              {{$stores->appends([
                'keyword' => $_GET['keyword'] ?? ''
              ])->links()}}
            </div>
          </div>
    </div>
  </section>

@endsection
@push('scripts')
    <script src="{{asset('plugins/select2/js/select2.full.min.js')}}"></script>
    <script>
    $(function () {
        $('.select2').select2({ width: '100%' });
    });
    </script>
@endpush