@extends('backend.layouts.app')
@section('content')
@extends('backend.layouts.app')
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    Ventures
                </div>
                <div class="card-body">
                    {{-- Modal Button --}}
                    <button type="button" class="btn btn-success mb-2" data-toggle="modal" data-target="#addventure">
                        Add Joint Venture
                    </button>
                    {{-- End Modal Button --}}
                    
                    {{-- Modal --}}
                    <form action="{{route('joint-ventures.store')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="modal fade" id="addventure" tabindex="-1" role="dialog" aria-labelledby="addventureLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="addventureLabel">Add venture</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <label for="company">Company</label>
                                        <input type="text" name="company" id="company" class="form-control">
                                        <label for="url">Url Link <span class="text-danger font-italic" style="font-size: .8em;">(Ex. https://example.com/)</span></label>
                                        <input type="text" name="url" id="url" class="form-control">
                                        <label for="logo">Logo <span class="text-danger">*</span><span class="text-danger">*</span></label>
                                        <input type="file" name="logo" id="logo" class="form-control p-1" accept="image/png, image/jpg, image/jpeg">
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                                        <button type="submit" class="btn btn-primary">Create</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    {{-- End Modal --}}
                    <div class="row mb-2">
                        <div class="col-lg-4">
                            <div class="d-flex">
                                <input type="text" name="search" id="search" placeholder="Search..." class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Company</th>
                                    <th>Url</th>
                                    <th>Logo</th>
                                    <th style="width: 200px;">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (count($ventures) != 0)
                                    @foreach ($ventures as $venture)
                                        @if ($venture->id != null)
                                            <tr>
                                                <td>
                                                    {{$venture->company}}
                                                </td>
                                                <td>
                                                    {{$venture->url}}
                                                </td>
                                                <td>
                                                    <img src="{{$venture->logo}}" style="width: 100px;" alt="">
                                                </td>
                                                <td>
                                                    <div class="d-flex">
                                                        <button class="btn btn-success" data-toggle="modal" data-target="#editVenture{{$venture->id}}">
                                                            <i class="fa fa-edit"></i>
                                                        </button>
                                                        <div class="mx-1"></div>
                                                        <form action="{{route('joint-ventures.destroy', $venture->id)}}" method="post">
                                                            @csrf
                                                            @method("DELETE")
                                                            <button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i></button>
                                                        </form>
                                                    </div>
                                                    {{-- Modal --}}
                                                    <form action="{{route('joint-ventures.update', $venture->id)}}" method="post" enctype="multipart/form-data">
                                                        @csrf
                                                        @method('PATCH')
                                                        <div class="modal fade" id="editVenture{{$venture->id}}" tabindex="-1" role="dialog" aria-labelledby="editVenture{{$venture->id}}Label" aria-hidden="true">
                                                            <div class="modal-dialog" role="document">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title" id="editVenture{{$venture->id}}Label">Add venture</h5>
                                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                            <span aria-hidden="true">&times;</span>
                                                                        </button>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        <label for="company">Company</label>
                                                                        <input type="text" value="{{$venture->company}}" name="company" id="company" class="form-control">
                                                                        <label for="url">Url Link <span class="text-danger font-italic" style="font-size: .8em;">(Ex. https://example.com/)</span></label>
                                                                        <input type="text" value="{{$venture->url}}" name="url" id="url" class="form-control">
                                                                        <label for="logo">Logo <span class="text-danger">*</span></label>
                                                                        <input type="file" name="logo" id="logo" class="form-control p-1" accept="image/png, image/jpg, image/jpeg">
                                                                        <img src="{{url($venture->logo)}}" class="img-fluid pt-2" alt="">
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                                                                        <button type="submit" class="btn btn-primary">Create</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                    {{-- End Modal --}}
                                                </td>
                                            </tr>
                                        @else
                                            <tr>
                                                <td colspan="4">No data result</td>
                                            </tr>
                                        @endif
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="4" class="bg-light text-center">No data result</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <nav aria-label="...">
                        <ul class="pagination">
                            @if ($ventures->currentPage() > 1)
                                <li class="page-item">
                                    <a class="page-link" href="{{$ventures->previousPageUrl()}}" tabindex="-1">Previous</a>
                                </li>
                            @else
                                <li class="page-item disabled">
                                    <a class="page-link" href="{{$ventures->previousPageUrl()}}" tabindex="-1">Previous</a>
                                </li>
                            @endif
                            
                            @for ($i = 1; $i <= $ventures->lastPage(); $i++)
                                <li class="page-item @if($i == $ventures->currentPage()) active @endif">
                                    <a class="page-link" href="{{$ventures->url($i)}}">{{$i}}</a>
                                </li>
                            @endfor

                            @if ($ventures->currentPage() < $ventures->lastPage() )
                                <li class="page-item">
                                    <a class="page-link" href="{{$ventures->nextPageUrl()}}">Next</a>
                                </li>
                            @else
                                <li class="page-item disabled">
                                    <a class="page-link" href="{{$ventures->nextPageUrl()}}">Next</a>
                                </li>
                            @endif
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $("#search").on("input", function() {
            $(this).quicksearch('table tbody tr');
        });
    </script>
@endsection
@endsection