@extends('layouts.admin')

@section('content')

@php
use Illuminate\Support\Str;
@endphp
<div class="container">
    <div class="row">
        <div class="col-md-12">
                <div class="card-header">
                    <h4>Pending  
                    @if($user->role_as == 10)
                    Seller
                    @else($user->role_as == 11)
                    Rider
                    @endif
                    </h4>
                    <hr>
                </div>
                <div class="card-body">
                    @if  ($user->role_as == 10)
                    <a href="{{ url()->previous() }}" class="btn btn-secondary me-2">Back</a>

                    <div class="card">
                        <div class="container p-2 my-2">

                            @if($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            @if(session('success'))
                                <div class="alert alert-success">
                                    {{ session('success') }}
                                </div>
                            @endif

                            <div class="card-header">

                                <div class="card-body">
                                    <form method="POST" action="{{ route('approve-selling') }}">
                                        @csrf



                                        <div class="mb-3 row">
                                            <div class="col-md-6">
                                                <input id="user_id" type="hidden" class="form-control @error('user_id') is-invalid @enderror"
                                                    name="user_id" value="{{ $user->id }}" required autocomplete="user_id">
                                                @error('user_id')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                                        <label for="shop_name">Shop Name</label>
                                                        <div class="p-2 border">
                                                        {{ old('municipal', $user->shop->shop_name) }}
                                                            @error('shop_name')
                                                            <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                       <br>
                                      <h6><label>PICK-UP ADDRESS</label></h6>
                                        <div class="form-group row">
                                            <div class="col-md-6">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label for="municipal">Municipal</label>
                                                        <div class="p-2 border">
                                                        {{ old('municipal', $user->shop->municipal) }}                                                            
                                                        @error('municipal')
                                                            <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label for="barangay">Barangay</label>
                                                        <div class="p-2 border">
                                                        {{ old('barangay', $user->shop->barangay) }}                                          
                                                                        @error('barangay')
                                                            <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        
                                        <div class="form-group">
                                                <label for="images" class="col-md-4 col-form-label text-md-right">{{ __('Identification') }}</label>

                                                <style>
    .enlarged-image {
        transform: scale(1.5); /* Increase the size of the image */
        z-index: 1; /* Ensure the enlarged image appears on top */
        position: absolute; /* Position the enlarged image on top of the page */
        top: 50%; /* Position the enlarged image in the center vertically */
        left: 50%; /* Position the enlarged image in the center horizontally */
        transform-origin: center center; /* Set the transform origin to the center */
    }
</style>

<div class="col-md-6">
    @if ($user->userImages->isNotEmpty())
        <div class="row">
            @php
                $groupedImages = $user->userImages->groupBy('image_identifier');
            @endphp

            @foreach($groupedImages as $identifier => $images)
                <div class="col-md-12 mb-3">
                    <h5>
                        @if ($identifier == 1)
                            Valid ID (Back to Back)
                        @elseif ($identifier == 5)
                           Business Permit
                        @elseif ($identifier == 4)
                         Other Documents
                        @endif
                    </h5>
                </div>

                @foreach($images as $image)
                    <div class="col-md-4 mb-3">
                        <div class="image-container" style="height: 150px; overflow: hidden;">
                            <img src="{{ asset('upload/userImage/'.$image->path) }}" alt="{{ $identifier == 1 ? 'Valid ID Image' : ($identifier == 2 ? 'Driver\'s License Image' : 'OR CR Image') }}" class="img-fluid adjustable-image" onclick="toggleImageSize(this)">
                        </div>
                    </div>
                @endforeach
            @endforeach
        </div>
    @endif
</div>


<script>
    function toggleImageSize(image) {
        image.classList.toggle('enlarged-image');
    }
</script>





                                    

                                        <div class="mb-3 row">
                                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('Email') }}</label>
                                            <div class="col-md-6">
                                            {{ $user->shop->email}}
                                              
                                            </div>
                                        </div>

                                        <div class="mb-3 row">
                                            <label for="phone" class="col-md-4 col-form-label text-md-right">{{ __('Phone Number') }}</label>
                                            <div class="col-md-6">
                                            {{ $user->shop->phone }}
                                            
                                            </div>
                                        </div>

                                        <div class="mb-3 row">
                                            <div class="col-md-6 offset-md-4">
                                                <button type="submit" class="btn btn-primary">
                                                    {{ __('Approve Seller') }}
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
    </div>
</div>



                    @else ($user->role_as == 11)

                    <form method="POST" action="{{ route('approve-rider') }}">

                        @csrf



                   
                    
                        <a href="{{ url()->previous() }}" class="btn btn-secondary me-2">Back</a>

                        <div class="row">
                        <div class="card">
                        <div class="container">
                                        <input type="hidden" name="role_as" value="3">

                                        
                                        <div class="mb-3 row">
                                            <div class="col-md-6">
                                                <input id="user_id" type="hidden" class="form-control @error('user_id') is-invalid @enderror"
                                                    name="user_id" value="{{ $user->id }}" required autocomplete="user_id">
                                                @error('user_id')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>


                                        <div class="row">
    <div class="col-md-4 mt-3">
        <label for="name">Rider's Name</label>
        <div class="p-2 border">
          {{ old('name', $user->name) }}
            @error('name')
                <span class="text-danger">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-md-4 mt-3">
        <label for="last_name">Last Name</label>
        <div class="p-2 border">
          {{  $user->last_name }}
            @error('last_name')
                <span class="text-danger">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-md-4 mt-3">
        <label for="email">Email</label>
        <div class="p-2 border">
      {{ $user->email }}
            @error('email')
                <span class="text-danger">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-md-4 mt-3">
        <label for="phone">Contact No</label>
        <div class="p-2 border">
            {{  $user->phone }}
            @error('phone')
                <span class="text-danger">{{ $message }}</span>
            @enderror
        </div>
    </div>
  <div class="col-md-4 mt-3">
    <label for="barangay">Barangay</label>
    <div class="p-2 border">
        @php
            $address = $user->addresses()->where('is_active', 1)->first();
        @endphp

        @if($address)
            {{ $address->barangay }}
        @else
            Address not found
        @endif

        @error('barangay')
            <span class="text-danger">{{ $message }}</span>
        @enderror
    </div>
</div>

<div class="col-md-4 mt-3">
    <label for="municipal">Municipal</label>
    <div class="p-2 border">
        @php
            $address = $user->addresses()->where('is_active', 1)->first();
        @endphp

        @if($address)
            {{ $address->municipal }}
        @else
            Address not found
        @endif

        @error('municipal')
            <span class="text-danger">{{ $message }}</span>
        @enderror
    </div>
</div>

</div>

<div class="form-group">
    <label for="images" class="col-md-4 col-form-label text-md-right">{{ __('Identification') }}</label>

    <style>
        .enlarged-image {
            transform: scale(1.5); 
            z-index: 1; 
            position: absolute;
            top: 0%; 
            left: 35%; 
            width: 35%;
            transform-origin: center center;
        }
    </style>

<div class="col-md-6">
    @if ($user->userImages->isNotEmpty())
        <div class="row">
            @php
                $groupedImages = $user->userImages->groupBy('image_identifier');
            @endphp

            @foreach($groupedImages as $identifier => $images)
                <div class="col-md-12 mb-3">
                    <h5>
                        @if ($identifier == 1)
                            Valid ID (Back to Back)
                        @elseif ($identifier == 2)
                            Driver's License (Back to Back)
                        @elseif ($identifier == 3)
                            OR CR 
                            @elseif ($identifier == 4)
                            Other Documents 
                        @endif
                    </h5>
                </div>

                @foreach($images as $image)
                    <div class="col-md-4 mb-3">
                        <div class="image-container" style="height: 150px; overflow: hidden;">
                            <img src="{{ asset('upload/userImage/'.$image->path) }}" alt="{{ $identifier == 1 ? 'Valid ID Image' : ($identifier == 2 ? 'Driver\'s License Image' : 'OR CR Image') }}" class="img-fluid adjustable-image" onclick="toggleImageSize(this)">
                        </div>
                    </div>
                @endforeach
            @endforeach
        </div>
    @endif
</div>


<script>
    function toggleImageSize(image) {
        image.classList.toggle('enlarged-image');
    }
</script>


<div class="mb-3 row">
                                            <div class="col-md-6 offset-md-4">
                                                <button type="submit" class="btn btn-primary">
                                                    {{ __('Approve Rider') }}
                                                </button>
                                            </div>
                                        </div>
                        @endif
                    </form>
                </div>
        </div>
    </div>
</div>

@endsection