@extends('admin.layout.layout')

@section('title') Create 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">Add 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">Add 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.store') }}">
    @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">
        <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">Advisory</option>
            <option value="director">Director</option>
            <option value="team">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" 
               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" 
               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"></textarea>
											<span class="text-danger error-message" id="summary-error"></span>
                                        </div>

	</div>
	</div>
	
	
		 <div class="mb-3">
        <label for="linkedin" class="form-label">Linkedin</label>
        <input type="text" class="form-control" id="linkedin" name="linkedin" 
               placeholder="Enter linkedin">
        <span class="text-danger error-message" id="linkedin-error"></span>
    </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">Active</option>
            <option value="inactive">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" style="display: none;">
        <label>Preview</label><br>
        <img id="imagePreview" class="img-thumbnail" style="max-width: 300px;" src="/path/to/default.jpg" />
    </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() {
	
		    let croppieInstance;
    let hasCropped = false;
    const defaultImage = '/path/to/default.jpg';

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

    // On image selection
    $('#imageInput').on('change', function (e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function (e) {
            croppieInstance.bind({ url: e.target.result });
            hasCropped = false;
            $('#croppedImageData').val('').prop('disabled', true);
        };
        reader.readAsDataURL(file);
    });

    // Crop image
    $('#cropButton').on('click', function () {
        if (!croppieInstance) return;

        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).show();
            $('#previewWrapper').show();
            hasCropped = true;
        });
    });

    // Reset image
    $('#resetImageButton').on('click', function () {
        if (croppieInstance) {
            croppieInstance.bind({ url: defaultImage });
        }
        $('#imageInput').val('');
        $('#croppedImageData').val('').prop('disabled', true);
        $('#imagePreview').attr('src', defaultImage);
        $('#previewWrapper').show();
        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();

            if (!hasCropped) {
                toastr.warning("Please crop the image before submitting.");
                return;
            }

            const btn = $('#submitButton').prop('disabled', true).text('Uploading...');
            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');
                        $('#formToProcess')[0].reset(); 
						setTimeout(function() {
						window.location.href = "{{ route('admin.teams.index') }}";
					}, 1500);
                    } 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