@extends('dashboard::layouts.app')


@section('title')
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
        Team
    </h5>
@endsection

@section('content')
    <style>
        .img-thumbs {
            background: #eee;
            border: 1px solid #ccc;
            border-radius: 0.25rem;
            margin: 1.5rem 0;
            padding: 0.75rem;
        }

        .img-thumbs-hidden {
            display: none;
        }

        .wrapper-thumb {
            position: relative;
            display: inline-block;
            margin: 1rem 0;
            justify-content: space-around;
        }

        .img-preview-thumb {
            background: #fff;
            border: 1px solid none;
            border-radius: 0.25rem;
            box-shadow: 0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.12);
            margin-right: 1rem;
            max-width: 140px;
            padding: 0.25rem;
        }

        .remove-btn {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: .7rem;
            top: -5px;
            right: 10px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 10px;
            font-weight: bold;
            cursor: pointer;
        }

        .remove-btn:hover {
            box-shadow: 0px 0px 3px grey;
            transition: all .3s ease-in-out;
        }
    </style>


    <!--begin::Card-->
    <div class="card card-custom gutter-b example example-compact card-collapsed" data-card="true" id="kt_card_4">
        <div class="card-header">
            <h3 class="card-title">
                Add New Team
            </h3>
            <div class="card-toolbar">
                <a href="#" class="btn btn-icon btn-sm btn-light-primary mr-1" data-card-tool="toggle">
                    <i class="ki ki-arrow-down icon-nm"></i>
                </a>
            </div>
        </div>

        <form class="form" action="{{ route('team.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="row form-group">
                    <label class="col-lg-3 col-form-label text-right">Select Category:</label>
                    <div class="col-lg-8">
                        <select class="form-control mb-2 selectpicker" name="category" data-size="4">
                            <option value="1">Executive</option>
                            <option value="2">Staff</option>
                            <option value="3">Youth Innovators</option>
                            <option value="4">Youth Activist Leadership Council Banke</option>
                            <option value="5">Youth Activist Leadership Council Kathmandu</option>
                        </select>
                        @error('category')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="row form-group">
                    <label class="col-lg-3 col-form-label text-right"> Full Name:</label>
                    <div class="col-lg-3">
                        <input type="text" name="full_name" class="form-control mb-2" placeholder="Enter full name here" value="{{ old('full_name') }}" required />
                        @error('full_name')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <label class="col-lg-2 col-form-label text-right"> Designation:</label>
                    <div class="col-lg-3">
                        <input type="text" name="designation" class="form-control mb-2" placeholder="Enter designation here" value="{{ old('designation') }}" required />
                        @error('designation')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="row form-group">
                    <label class="col-lg-3 col-form-label text-right"> Phone:</label>
                    <div class="col-lg-3">
                        <input type="text" name="phone" class="form-control mb-2" placeholder="Enter phone here" value="{{ old('phone') }}" required />
                        @error('phone')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <label class="col-lg-2 col-form-label text-right"> Email:</label>
                    <div class="col-lg-3">
                        <input type="text" name="email" class="form-control mb-2" placeholder="Enter email here" value="{{ old('email') }}" required />
                        @error('email')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="row form-group">
                    <label class="col-lg-3 col-form-label text-right"> Facebook url:</label>
                    <div class="col-lg-3">
                        <input type="text" name="facebook_id" class="form-control mb-2" placeholder="Enter facebook url here" value="{{ old('facebook_id') }}" required />
                        @error('facebook_id')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <label class="col-lg-2 col-form-label text-right"> Instagram url:</label>
                    <div class="col-lg-3">
                        <input type="text" name="instagram_id" class="form-control mb-2" placeholder="Enter instagram here" value="{{ old('instagram_id') }}" required />
                        @error('instagram_id')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="row form-group">
                    <label class="col-lg-3 col-form-label text-right"> Twitter url:</label>
                    <div class="col-lg-3">
                        <input type="text" name="twitter_id" class="form-control mb-2" placeholder="Enter twitter url here" value="{{ old('twitter_id') }}" required />
                        @error('twitter_id')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <label class="col-lg-2 col-form-label text-right"> LinkedIn url:</label>
                    <div class="col-lg-3">
                        <input type="text" name="linkedin_id" class="form-control mb-2" placeholder="Enter linkedin here" value="{{ old('linkedin_id') }}" required />
                        @error('linkedin_id')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="row form-group">
                    <label class="col-lg-3 col-form-label text-right">Quote:</label>
                    <div class="col-lg-8">
                        <textarea class="form-control @error('quote') is-invalid @enderror" name="quote" rows="5">{{ old('quote') }}</textarea>
                        @error('quote')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>

                <div class="row form-group">
                    <label class="col-lg-3 col-form-label text-right"> User Image:</label>
                    <div class="col-lg-8">
                        <input type="file" name="main_image" class="form-control mb-2" placeholder="Choose user image here" value="{{ old('main_image') }}" />
                        @error('main_image')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Status</label>
                    <div class="col-lg-8 col-form-label">
                        <div class="radio-inline">
                            <label class="radio radio-success">
                                <input type="radio" name="status" value="1" checked="checked" />
                                <span></span>
                                Active
                            </label>
                            <label class="radio radio-danger">
                                <input type="radio" name="status" value="0" />
                                <span></span>
                                Inactive
                            </label>
                        </div>
                    </div>
                </div>

            </div>


            <div class="card-footer">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <button type="submit" class="btn btn-success mr-2">Add New Team</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!--end::Card-->

    <!--begin::Card-->
    <div class="card card-custom gutter-b">
        <div class="card-header flex-wrap py-3">
            <div class="card-title">
                <h3 class="card-label">
                    Team List
                </h3>
            </div>
        </div>
        <div class="card-body">
            <!--begin: Datatable-->
            <div class="tab-pane" id="tab_1_1">
                <div class="portlet-body">
                    <div class="text-right">
                        <form action="{{ route('team.view') }}" method="GET">
                            <input type="text" name="search" required />
                            <button type="submit">Search</button>
                        </form>
                    </div>
                    <table class="table zero-configuration ordertable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Team Name</th>
                                <th>Designation</th>
                                <th>Category</th>
                                <th>Actions</th>
                            </tr>
                        </thead>

                        <tbody>
                            @if (count($teams) > 0)
                                @foreach ($teams as $team)
                                    <tr>
                                        <td>{{ $teams->firstItem() + $loop->index }}</td>
                                        <td>{{ $team->full_name }}</td>
                                        <td>{{ $team->designation }}</td>
                                        <td>
                                            @if ($team->category == 1)
                                                Admin
                                            @elseif($team->category == 2)
                                                Management
                                                <!-- Handle other cases if needed -->
                                            @endif
                                        </td>
                                        <td>
                                            <span style="display: inline-block;">
                                                <a href="{{ route('team.edit', ['id' => $team->id]) }}" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Edit"><i class="la la-edit"></i></a>
                                            </span>

                                            <span style="display: inline-block;">
                                                <form action="{{ route('team.delete', ['id' => $team->id]) }}" method="POST">
                                                    @csrf
                                                    <input type="hidden" name="id" value="{{ $team->id }}">
                                                    <button class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Delete" onClick="return confirm('Are you sure want to delete?')"><i class="la la-trash"></i></button>
                                                </form>
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="4">No Team Found</td>
                                </tr>
                            @endif
                        </tbody>

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


            <div class='dataTables_paginate paging_simple_numbers float-right card-body'>

                {{ $teams->appends(Request::except('page'))->links('pagination::bootstrap-4') }}

            </div>
            <!--end: Datatable-->
        </div>
    </div>
    <!--end::Card-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        var imgUpload = document.getElementById('upload-img'),
            imgPreview = document.getElementById('img-preview'),
            imgUploadForm = document.getElementById('form-upload'),
            totalFiles, previewTitle, previewTitleText, img;

        imgUpload.addEventListener('change', previewImgs, true);

        function previewImgs(event) {
            totalFiles = imgUpload.files.length;

            if (!!totalFiles) {
                imgPreview.classList.remove('img-thumbs-hidden');
            }

            for (var i = 0; i < totalFiles; i++) {
                wrapper = document.createElement('div');
                wrapper.classList.add('wrapper-thumb');
                removeBtn = document.createElement("span");
                nodeRemove = document.createTextNode('x');
                removeBtn.classList.add('remove-btn');
                removeBtn.appendChild(nodeRemove);
                img = document.createElement('img');
                img.src = URL.createObjectURL(event.target.files[i]);
                img.classList.add('img-preview-thumb');
                wrapper.appendChild(img);
                wrapper.appendChild(removeBtn);
                imgPreview.appendChild(wrapper);

                $('.remove-btn').click(function() {
                    $(this).parent('.wrapper-thumb').remove();
                });

            }


        }
    </script>
@endsection