@extends('administrator.layout')
@section('admintitle', 'Rank')
@section('content')
<style>
    img, svg {
    vertical-align: middle;
    width: 18px;
}
</style>
            <!-- Table Start -->
            <div class="container-fluid pt-4 px-4">
                <div class="row g-4">
                    <div class="col-12">
                        <div class="bg-light rounded h-100 p-4">
                            
                             @if (session()->has('success'))
                                <div class="alert alert-success alert-dismissible fade show mb-2" role="alert">
                                    <i class="fa fa-exclamation-circle me-2"></i><strong>{{ __('text.success') }} !</strong> {{ session()->get('success') }}.
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif
                        
                            @if (session()->has('error'))
                                <div class="alert alert-danger alert-dismissible fade show mb-2" role="alert">
                                    <i class="fa fa-exclamation-circle me-2"></i><strong>{{ __('text.error') }} !</strong> {{ session()->get('error') }}.
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif

                            <div class="row mb-4 mt-0">
                                <div class="col-md-9 mt-3"><h5>{{ __('text.rank') }} {{ __('text.table') }}</h5></div>
                                <div class="col-md-3 mt-1 text-end"><a href="add_rank"><button class="btn btn-warning  rounded-pill" data-toggle="modal" data-target="#create"> + {{ __('text.create') }}</button></a></div>
                            </div>                            
                            
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th scope="col">{{ __('text.name') }}</th>
                                            <th scope="col">{{ __('text.bonus') }}</th>
                                            <th scope="col">{{ __('text.sort_order') }}</th>
                                            <th scope="col">{{ __('text.image') }}</th>
                                            <th scope="col">{{ __('text.action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($data as $d)
                                        <tr>
                                            <td scope="row">{{ $d->name }}</td>
                                            <td>{{ $d->bonus }}</td>
                                           <td>{{ $d->sort_order ?: 0 }}</td>
                                            <td> @if($d->image)
                                                    <img src="/public/storage/ranks/{{ $d->image }}" style="width:80px">
                                                @else
                                                   <img src="{{ asset('public/storage/product/no imge.jpg') }}" style="width: 70px;">
                                                @endif</td>
                                            <td>
                                                <a class="btn btn-square btn-sm btn-info mx-2" href="{{ route('admin_edit_rank', ['id' => $d->id,'page' => $data->currentPage()]) }}"><i class="fa fa-edit"></i></a>
                                                <button type="button" class="btn btn-square btn-sm btn-danger mx-2" data-toggle="modal" data-target="#delete{{ $d->id }}"><i class="fa fa-trash"></i></button>

                        						<div class="modal fade" id="delete{{ $d->id }}">
            									  <div class="modal-dialog modal-lg">
            										<div class="modal-content">
            										  <div class="modal-header">
            											<h6 class="modal-title">{{ __('text.delete') }}</h6>
            											<button type="button" class="btn" data-dismiss="modal" aria-label="Close">
            											  <span aria-hidden="true">&times;</span>
            											</button>
            										  </div>
            										  <div class="modal-body">
            										      <form Action="{{ route('admin_delete_rank') }}" Method="POST">
            										          @csrf
            										          <h5>{{ __('text.confirm') }}</h5>
										                    	<input type="hidden" class="form-control border-primary" name="id" value="{{ $d->id }}">
										                    	<div class="text-end">
             										            <button type="submit" class="btn btn-danger">{{ __('text.delete') }}</button>
                    											<button type="button" class="btn btn-outline-danger" data-dismiss="modal">{{ __('text.close') }}</button>
            										          </div>
            										      </form>
            										  </div>
            										</div>
            									  </div>
            									</div>                                                
                                            </td>
                                        </tr>
                                         @empty
                                        <tr>
                                            <td colspan="5" class="text-center">{{ __('text.no_records_found') }}</td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                        <tfoot>
    <tr>
        <td colspan="5">
            <div class="d-flex showing-page">
                {{ $data->links() }}
                
            </div>
        </td>
    </tr>
</tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Table End -->


@endsection