@extends('admin.layout.layout')

@section('title') Update Team @endsection

@section('content')


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

                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                    <h4 class="mb-sm-0 font-size-18">Update Team</h4>

                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                                            <li class="breadcrumb-item active">Update Team</li>
                                        </ol>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- end page title -->
						<div class="card">
                                    <div class="card-body">
									 <form id="formToProcess" method="POST" action="{{ route('admin.teams.update', $team->id) }}">
    @csrf
						<div class="row">
						
                            <div class="col-xl-6">
                                
                                       
                                      
	
	<div class="mb-3">
        <label>Select Image</label>
        <input type="file" id="imageInput" class="form-control">
        <span class="text-danger error-message" id="image-error"></span>
    </div>
                                          <div class="mb-3">
        <label for="name" class="form-label">Name</label>
        <input type="text" class="form-control" id="name" name="name" 
               placeholder="Enter Name" value="{{$team->name}}">
        <span class="text-danger error-message" id="name-error"></span>
    </div>
	
	


												 <div class="mb-3">
        <label for="type" class="form-label">Select Type</label>
        <select id="type" class="form-select" name="type">
			
			<option value="advisory" {{ old('type', $team->type ?? '') == 'advisory' ? 'selected' : '' }}>Advisory</option>
			<option value="director" {{ old('type', $team->type ?? '') == 'director' ? 'selected' : '' }}>Director</option>
			<option value="team" {{ old('type', $team->type ?? '') == 'team' ? 'selected' : '' }}>Team</option>
        </select>
        <span class="text-danger error-message" id="type-error"></span>
    </div>
	
	
	 <div class="mb-3">
        <label for="designation" class="form-label">Designation</label>
        <input type="text" class="form-control" id="designation" name="designation" value="{{$team->designation}}"
               placeholder="Enter Designation">
        <span class="text-danger error-message" id="designation-error"></span>
    </div>
	 <div class="mb-3">
        <label for="organization" class="form-label">Organization</label>
        <input type="text" class="form-control" id="organization" name="organization" value="{{$team->organization}}"
               placeholder="Enter Organization">
        <span class="text-danger error-message" id="organization-error"></span>
    </div>
	
	
	<div class="row">
	<div class="col-xl-12">
	
	<div class="mb-3">
                                            <label for="summary">Summary</label>
                                            <textarea id="summary" name="summary" class="form-control valid" rows="5" placeholder="Enter Summary" aria-invalid="false">{{$team->summary}}</textarea>
											<span class="text-danger error-message" id="summary-error"></span>
                                        </div>

	</div>
	</div>
	

	
							
											 <div class="mb-3">
        <label for="status" class="form-label">Select Status</label>
        <select id="status" class="form-select" name="status">
            <option value="">Choose...</option>
           <option value="active" {{ old('status', $team->status ?? '') == 'active' ? 'selected' : '' }}>Active</option>
            <option value="inactive" {{ old('status', $team->status ?? '') == 'inactive' ? 'selected' : '' }}>Inactive</option>
        </select>
        <span class="text-danger error-message" id="status-error"></span>
    </div>


                                           
										   <div>
                                                <button id="submitButton" type="submit" class="btn btn-primary w-md">Submit</button>
                                            </div>
                                       
                                    </div>
                                    <!-- end card body -->
<div class="col-xl-6">

    <div class="mb-3">
        <div id="croppieContainer"></div>
    </div>
<div class="d-flex justify-content-center gap-2">
    <button type="button" class="btn btn-success" id="cropButton">Crop Image</button>
    <button type="button" class="btn btn-secondary" id="resetImageButton">Reset Image</button>
  </div>
  
  <div class="d-flex justify-content-center">
    <div class="mb-3 mt-3" id="previewWrapper">
        <label>Preview</label><br>
        <img id="imagePreview" class="img-thumbnail" style="max-width: 300px;" src="{{asset('storage')}}/{{$team->image}}" />
    </div>
  </div>
    <input type="hidden" name="cropped_image" id="croppedImageData" disabled>
 </div>
                              
							  </div>
							   </form>
                                <!-- end card -->
                            </div>
                            <!-- end col -->

 </div>
                        
                        
                    </div> <!-- container-fluid -->
                </div>

@endsection
@section('script')
<script>

$(document).ready(function() {
	
		            const existingImageUrl = $('#imagePreview').attr('src'); // Store original image URL
        let croppieInstance;
        let hasCropped = false;
        let hasNewImage = false; // Track if new image was selected

        // Initialize Croppie
        croppieInstance = new Croppie($('#croppieContainer')[0], {
            viewport: { width: 400, height: 400 },
            boundary: { width: 402, height: 402 },
            showZoomer: true,
            enableResize: false
        });

        // Hide croppie controls initially
        $('#cropButton, #resetImageButton').hide();

        // On image selection
        $('#imageInput').on('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;
            
            hasNewImage = true; // Flag that new image was selected
            hasCropped = false; // Reset crop status
            $('#cropButton, #resetImageButton').show(); // Show controls
            
            const reader = new FileReader();
            reader.onload = function(e) {
                croppieInstance.bind({ url: e.target.result });
                $('#croppedImageData').val('').prop('disabled', true);
            };
            reader.readAsDataURL(file);
        });

        // Crop image
        $('#cropButton').on('click', function() {
            croppieInstance.result({
                type: 'base64',
                size: { width: 400, height: 400 },
                format: 'jpeg',
                quality: 1
            }).then(function(base64) {
                $('#croppedImageData').val(base64).prop('disabled', false);
                $('#imagePreview').attr('src', base64);
                hasCropped = true;
            });
        });

        // Reset image
        $('#resetImageButton').on('click', function() {
            $('#imageInput').val('');
            $('#croppedImageData').val('').prop('disabled', true);
            $('#imagePreview').attr('src', existingImageUrl);
            $('#cropButton, #resetImageButton').hide();
            hasNewImage = false;
            hasCropped = false;
        });
	
	
    $('#formToProcess').validate({
        rules: {
            name: {
                required: true,
                maxlength: 191
            },
			type: {
                required: true
            },
			designation: {
                required: true
            },
			organization: {
                required: true
            },
			summary: {
                required: true
            },
            status: {
                required: true,
            },
			cropped_image: { required: true }
        },
        messages: {
            name: {
                required: "Please enter  name",
                maxlength: "name should not exceed 191 characters"
            },
			type: {
                required: "Please select  type"
            },
			designation: {
                required: "Please enter  designation"
            },
			organization: {
                required: "Please enter organization"
            },
			summary: {
                required: "Please enter  summary"
            },
            status: "Please select a valid status",
			cropped_image: "Please crop and select an image"
        },
        errorPlacement: function (error, element) {
            $('#' + element.attr('id') + '-error').html(error);
        },
        submitHandler: function (form, e) {
            e.preventDefault();
			const submitButton = $('#submitButton');
const btn = $('#submitButton').prop('disabled', true).text('Uploading...');
            // Only validate crop if new image was selected
                if (hasNewImage && !hasCropped) {
                    toastr.warning("Please crop the image before submitting.");
                    btn.prop('disabled', false).text('Submit');
                    return;
                }

            
            const formData = new FormData(form);

            $.ajax({
                url: $(form).attr('action'),
                method: $(form).attr('method'),
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $('.error-message').html('');
                },
                success: function(response) {
                    if (!response.error) {
                        toastr.success(response.message, 'Success');
						
                   
                    } else {
                        toastr.error(response.message, 'Error');
                    }
                },
                error: function(xhr) {
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        toastr.error(xhr.responseJSON.message, 'Server Error');
                    }
                    
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(key, value) {
                            $('#' + key + '-error').html(value[0]);
                        });
                    }
                },
                complete: function() {
                    // Re-enable the button and restore text
                    submitButton.prop('disabled', false).text('Submit');
                }
            });
        }
    });
});
</script>
@endsection